Проблемы с перекрестным происхождением, получающие base64 кодирование изображения

Я делаю «простой» букмарклет для 4chan (потенциально расширяемый для других сайтов), который будет загружать все изображения в текущем потоке в виде zip-архива. Изображения, отображаемые в потоке 4chan, - это просто миниатюры. Сами изображения предоставляются как ссылки, к которым можно получить доступ, щелкнув эскизы.Проблемы с перекрестным происхождением, получающие base64 кодирование изображения

Мой код должен работать почти отлично. Я нашел класс, который содержит ссылки на полноразмерные изображения. Я выбираю все из них с помощью jquery. Я использую JSZip для компиляции изображений. Но JSZip требует данных изображения, закодированных в base64. После пробития SO для методов для этого кажется почти единодушным, что рисование изображения на холсте и преобразование изображения в base64 таким образом - лучший способ сделать это. Тем не менее, поскольку 4chan предоставляет ссылки на свои образы вместо того, чтобы быть прямо там, на сайте, холст становится «испорченным», когда я рисую на него связанное изображение, и я не могу получить от него кодировку base64.

Как я могу сделать это по-другому, чтобы он работал? Есть ли способ создания креста? Я попытался добавить crossorigin="anonymous" к изображениям, которые я создаю, но это не сработает.

источник

2014-01-04 jchitel

Если изображения, которые вы хотите поставить не размещаются на том же сервере, что и веб-страниц , вы всегда получите CORS tainted canvas. Общим решением является обертка imagedata в JSONP, которая поставляет imagedata как «скрипт». Скрипты не подпадают под CORS и поэтому не будут падать на ваш холст. – markE

~~Проверьте window.btoa() (doc), который вы можете использовать для кодирования двоичных данных base-64.~~

В этом случае не должно быть необходимости в холсте, а вместо этого - download the data with "ajax" (SO).

Если вы используете холст, и изображение, например, JPEG, вы также получите сжатое изображение (уменьшенное качество), и оно будет медленнее, поэтому я бы не рекомендовал холст в этом случае.

Here is a solution as well (SO).

источник

2014-01-04 18:23:09 K3N

btoa() определенно похоже, что он может работать для меня, но он только преобразует строку в base64. Как получить изображение в виде строки? – jchitel

@jchitel ay, да, ты прав. Я забыл, что потребовалась только строка (и сама основа ответа ... 8- |). Извини за это. Проверьте решение в последней ссылке вместо этого - он будет кодировать двоичные данные в base64. – K3N

var getDataUri = function (targetUrl, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      callback(reader.result); 
     }; 
     reader.readAsDataURL(xhr.response); 
    }; 
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/'; 
    xhr.open('GET', proxyUrl + targetUrl); 
    xhr.responseType = 'blob'; 
    xhr.send(); 
}; 
getDataUri(path, function (base64) { 
    // base64 availlable here 
})

При преобразовании в base64 вы можете использовать прокси URL (https://cors-anywhere.herokuapp.com/) до вашего пути изображения, чтобы избежать проблемы перекрестного происхождения

источник

2017-05-26 10:18:22

Проблемы с перекрестным происхождением, получающие base64 кодирование изображения

ответ

Смежные вопросы