Получить изображение base64 из URL с помощью Javascript

Question

У меня есть фрагмент, который запрашивает изображение с URL:

var toDataURL = url => fetch(url, {mode: "no-cors"})
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))


toDataURL('https://www.google.hu/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })

Фрагмент кода взят из этой темы

Этот фрагмент кода запрашиваетЛоготип Google, и он работает просто отлично.Я вижу успешный ответ изображения на вкладке сети, я вижу само изображение, а также код base64 возвращается на консоль, как и должно (вы можете попробовать его, скопировав и вставив его в консоль Chrome)

Однако, если я изменю URL-адрес на это: https://images.dog.ceo/breeds/husky/n02110185_12748.jpg

Я не получу код base64 обратно в консоль.Запрос выполнен успешно, он виден в ответе, но base64 не возвращается.

Я пробовал его с несколькими изображениями, с png с, в большинстве случаев он работает, с jpeg с, никогда.

Есть ли какие-то дополнительные настройки в FileReader api, которые мне не хватает?

Answer 1

Если вы посмотрите на источник images.dog.ceo/breeds/husky/n02110185_12748.jpg, заголовок ответа не содержит Allow-Access-Control-Origin (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin).

Так что из другого домена вы никогда не получите этого клиентаОднако, если вы откроете расположение, затем откроете консоль и вставите свой код, вы увидите, что dataURL будет зарегистрировано.

Рассмотрите домены белого списка и добавьте соответствующий заголовок, если это возможно, длянекоторое вдохновение:

Домены множественного происхождения с контролем доступа и разрешением доступа?