Как передать картинку в json
Перейти к содержимому

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

  • автор:

Как отправить фото с input file на сервер json?

Как отправить выбранное фото на сервер json? стэк: React, Redux, Json-server.
Посмотрел немало роликов, толком ничего не нашел.

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

Комментировать

Решения вопроса 0

Ответы на вопрос 2

serbananas

Александр Макаров @serbananas

https://www.youtube.com/watch?v=fnzO0U1mSb8&list=P. вот ролик, там доступно все объясняется

Ответ написан более двух лет назад

Комментировать

Нравится Комментировать

Софт для автоматизации

Если вы хотите отправить фото на сервер именно внутри JSON, то сначала вам нужно будет конвертировать саму фотографию в base64! На сервере, соответственно, потребуется base64 обратно преобразовать в файл. Решите для начала этот вопрос, а уже затем гуглите как отправлять на сервер JSON при помощи AJAX.

Ответ написан более двух лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

typescript

  • TypeScript
  • +1 ещё

Как типизировать middleware в redux store?

  • 1 подписчик
  • 5 часов назад
  • 32 просмотра

Как можно загрузить картинки на страницу из 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', ` 
×
$<file.name>
`) > 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 вставить или загрузить.
61850ef88dcbd751356586.png 61850f212acd6264540097.png

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *