html <img src = ...> работает, но JS Загрузка изображения вызывает ошибку CORS

Я хочу создать редактор изображений в js + jquery. На первом этапе я прошу пользователя указать URL-адрес изображения. Но я сталкиваюсь с проблемой, когда я пытаюсь загрузить данные изображения внутри JS (для генерации образа url base64). Я получаю сообщение об ошибке в консоли: a€¦ has beeb blocked by CORS policy: Access-Control-Allow-Origin a€¦. Но мне интересно, почему? Если в html-файле я создаю например (ссылка на изображение):

<img  src="https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg" />

Загрузка изображения браузера без проблем CORS! Вот мой код JS, который для одного и того же изображения бросает проблему CORS:

 function downloadFile(url) {
    console.log({url});    
    var img = new Image();
    img.onload = function() {
        console.log('ok'); 
        // never execute because cors error
        // a€¦ make base64 uri with image data needed for further processing
    };

    img.crossOrigin = "Anonymous";
    img.src = url;
}

Итак, вопрос в том, как заставить JS загружать изображение (как html-tag загрузить его) и преобразовать его в url базы64, избегая проблемы с CORS?

https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg

javascript,html,cors,hotlinking,

1

Ответов: 1

2

Я пытаюсь найти решение самостоятельно (JS ES6), но найти только-частично. Мы можем загружать img из no-CORS support src в canvas, но браузерные переключатели переходят в режим taint , который не позволяет нам звонить toDataURL(и любой другой доступ к контенту).

Таким образом, единственный способ преодолеть это препятствие - создать прокси-сервер (например, на PHP), который будет иметь CORS 'on', и он будет загружать изображения для данного URL-адреса и отправлять обратно в наше приложение в JS. Я нашел бесплатный сервер https://cors-anywhere.herokuapp.com, который мы можем использовать для разработки тестов. Ниже приведен полный функциональный код, который возвращает dataUri из заданного URL-адреса изображения:

loadImgAsBase64(url, callback)
{
    let canvas = document.createElement('CANVAS');
    let img = document.createElement('img');
    img.setAttribute('crossorigin', 'anonymous');
    img.src = 'https://cors-anywhere.herokuapp.com/'+url;

    img.onload = () =>
    {
        canvas.height = img.height;
        canvas.width = img.width;
        let context = canvas.getContext('2d');
        context.drawImage(img,0,0);
        let dataURL = canvas.toDataURL('image/png');
        canvas = null;
        callback(dataURL);
    };
}

И мы можем это назвать (es6):

let url='https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg';
this.loadImgAsBase64(url, (dataURL) => { console.log('imgData:',dataURL) });

Thats all :) (я тестировал его только на хроме)

JavaScript, HTML, CORS, хотлинкинг,
Похожие вопросы
Яндекс.Метрика