Как передать картинку в json

Как можно загрузить картинки на страницу из json файла c url?

Подскажите пожалуйста как загрузить картинки из json файла страницу.Есть json файл с url изображений и размерами (файл показан на картинке). Нужно что-бы при клике на кнопку открыть я выбирал файл json и выводил картинки на страницу по url.

upload('#file', < multi: true, accept: ['.png', '.jpg', '.jpeg', '.gif', '.json'] >); function upload(selector, options = <>) < let files = []; const input = document.querySelector(selector); const preview = document.querySelector('.preview'); const open = document.createElement('button'); open.classList.add('btn'); open.textContent = 'Открыть'; if(options.multi) < input.setAttribute('multiple', true) >if(options.accept && Array.isArray(options.accept)) < input.setAttribute('accept', options.accept.join(',')) >input.insertAdjacentElement('afterend', open); const triggerInput = () => input.click(); const changeHandler = (event) => < if(!event.target.files.length) < return >files = Array.from(event.target.files) files.forEach(file => < if (!file.type.match('image')) < return >const reader = new FileReader() reader.onload = ev => < const src = ev.target.result preview.insertAdjacentHTML('afterbegin', ` 
×
 
 `) > reader.readAsDataURL(file) >) > const removeHandler = event => < if(!event.target.dataset.name) < return >const = event.target.dataset files = files.filter(file => file.name !== name) const block = preview.querySelector(`[data-name="$"]`) .closest('.preview-image') block.remove() > open.addEventListener('click', triggerInput); input.addEventListener('change', changeHandler); preview.addEventListener('click', removeHandler); >;

.main < max-width: 860px; margin: 0 auto; min-height: 100vh; >.btn < color: rgb(73, 156, 224); position: relative; border: 2px solid rgb(73, 156, 224); text-decoration: none; padding: 0.5rem; outline: none; cursor: pointer; background: #ffffff; border-radius: 20px; margin: 1rem; font-weight: 700; >.btn.primary < background: rgb(73, 156, 224); color: #ffffff; >.btn.active < box-shadow: inset 1px 1px 1px rgb(0, 0, 0, 0.3); >.btn:hover < cursor: pointer; opacity: 0.8; >input[type=file] < display: none; >.preview < display: flex; flex-wrap: wrap; >.preview-image < position: relative; height: 20vh; flex-grow: 1; margin: 5px; overflow: hidden; >.preview-image:last-child < flex-grow: 10; >.preview-image img < max-height: 100%; min-width: 100%; object-fit: cover; vertical-align: bottom; transition: all 0.3s ease; >.preview-image img:hover < transform: scale(1.1); >.preview-image:hover .preview-remove < opacity: 1; >.preview-remove

Как поместить файл изображения в объект json?

Я создаю базу данных для видеоигр, каждая из которых содержит такие элементы, как имя, жанр и образ игры. Можно ли поместить изображения в объект json для db? Если это не так?

Dyll Bro 28 дек. 2015, в 00:06
Поделиться
WhiteHat 27 дек. 2015, в 22:20
@WhiteHat WhiteHat, как работает base 64?
Dyll Bro 27 дек. 2015, в 22:37

просто означает, преобразовать изображение в строку base64 , которая может быть преобразована обратно в изображение -> пример

WhiteHat 27 дек. 2015, в 23:06
@WhiteHat офигенно спасибо, мужик!
Dyll Bro 27 дек. 2015, в 23:15
Drenmi 28 дек. 2015, в 04:29
Ничего неясного в этом вопросе, проголосовал за открытие.
user000001 29 дек. 2017, в 16:07
Показать ещё 4 комментария
Поделиться:

6 ответов

Лучший ответ

Я могу думать о том, чтобы сделать это двумя способами:

1.

Сохранение файла в файловой системе в любом каталоге (например, dir1 ) и переименование его, что гарантирует уникальность имени для каждого файла (может быть временной отметкой) (например, xyz123.jpg ), а затем сохранение этого имени в некоторые базы данных. Затем при создании JSON вы вытаскиваете это имя файла и генерируете полный URL (который будет http://example.com/dir1/xyz123.png ) и вставляете его в JSON.

2.

Base 64 Encoding, Это в основном способ кодирования произвольных двоичных данных в тексте ASCII. Он занимает 4 символа на 3 байта данных, плюс, возможно, немного отступов в конце. По сути, каждый 6 бит ввода кодируется в 64-символьном алфавите. «Стандартный» алфавит использует A-Z, a-z, 0-9 и + и /, с = в качестве символа заполнения. Существуют варианты, защищенные URL-адресами. Таким образом, этот подход позволит вам разместить свое изображение непосредственно в MongoDB, сохраняя его. Кодируйте изображение и декодируйте его, извлекая его, у него есть свои недостатки:

• кодировка base64 делает размеры файлов примерно на 33% больше, чем их исходные двоичные представления, что означает больше данных по проводу (это может быть исключительно болезненно в мобильных сетях).
• данные URI поддерживаются в IE6 или IE7.
• Закодированные данные base64 могут потребовать больше времени, чем двоичные данные.

Преобразование изображения в URI UATA

A.) Холст

Загрузите изображение в Image-Object, нарисуйте его на холсте и преобразуйте холст обратно в dataURL.

function convertToDataURLviaCanvas(url, callback, outputFormat)< var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function()< var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = this.height; canvas.width = this.width; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); canvas = null; >; img.src = url; > 

Использование

convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img)< // Base64DataURL >); 

Поддерживаемые форматы ввода image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) FileReader

Загрузите изображение как blob через XMLHttpRequest и используйте API FileReader для преобразования его в URL-адрес данных.

function convertFileToBase64viaFileReader(url, callback) < var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = function() < var reader = new FileReader(); reader.onloadend = function () < callback(reader.result); >reader.readAsDataURL(xhr.response); >; xhr.open('GET', url); xhr.send(); > 

• отсутствует поддержка браузера.
• имеет лучшее сжатие
• работает и для других типов файлов.

Использование

convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img)< // Base64DataURL >); 

Как загрузить локальные картинки в json?

У меня есть много картинок, и было бы классно иметь просто json file, откуда через итерацию можно был бы загружать в dom, но я не знаю как локальные картинки в json вставить или загрузить.

• Вопрос задан более двух лет назад
• 3738 просмотров

1 комментарий

Простой 1 комментарий

Передача картинки .jpg через JSON

Задача такая:
Конфигурация на платформе 1С:Предприятие 8.3 (8.3.9.2033)
Имеется номенклатура с прикрепленными к ней файлами, в том числе и изображениями в формате .jpg (файлы лежат в ХранилишеЗначений)
Необходимо передать эти изображения через файл JSON.
Другие варианты обмена не рассматриваются , только JSON.

ЗначениеВСтрокуВнутр(ЗначениеРеквизита) ЗначениеИзСтрокиВнутр(ЗначениеJSON["Значение"])

не срабатывает

По теме из базы знаний

• Дата
• Дата
• Рейтинг всех уровней
• Рейтинг 1-го уровня
• Древо развёрнутое
• Древо свернутое

Свернуть все

2. kasper076 99 31.01.17 08:09 Сейчас в теме

Base64Строка() Base64Значение()