Изменение масштаба изображения делает его черным в javascript

#javascript

#javascript

Вопрос:

Я придумал функцию, которая преобразует ширину и высоту изображения в новые значения,

 function imageToDataUri(src, width, height) {

    // create an off-screen canvas
    var img=new Image();
    img.src=src;
    var canvas = document.createElement('canvas');
    var  ctx = canvas.getContext('2d');

    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;

    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);

    var d = ctx.getImageData(0, 0, width, height);
    console.log('de from transformation is');
    console.log(d);

    return canvas.toDataURL();
}
 

Входными данными для функции является строка base64, а выходные данные такие же, но иногда вышеуказанная функция дает мне полное черное изображение, когда я использую свое входное изображение. Может кто-нибудь сказать мне, есть ли что-то, чего мне не хватает в моих кодах?

Комментарии:

1. вы не можете сделать это с изображениями, которые вам не принадлежат (межсайтовые изображения)… эти изображения испорчены, никаких данных, с которыми вы можете играть. Это по соображениям авторского права.

2. какой тогда будет альтернатива?

3. размещайте свои собственные изображения или прокси-запросы через ваш сервер, на котором работает ваш сайт. речь идет о нарушении авторских прав, следите за своими требованиями.

4. Я совсем не уверен, связано ли это с межсайтовыми изображениями, поскольку я не получаю никаких ошибок в журнале по этому поводу .. и когда-нибудь моя функция работает..

5. речь идет о испорченном холсте. это работает, когда вам разрешено рисовать изображения со своего сайта или с других сайтов. Это не так, когда вам не разрешено. Здесь нет никакой магии. developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image