Невозможно преобразовать холст в изображение после рисования изображения на холсте с Reactjs - PullRequest
Новая
       8

Невозможно преобразовать холст в изображение после рисования изображения на холсте с Reactjs

1 голос
/ 29 января 2020

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

`Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.`

вот мой код рисовать функция изображения 

const printLocation = _ => {
    let canvas = canvasRef.current;
    let context = canvas.getContext("2d");
    let img = new Image();
    img.src = "https://kilausenja.com/wp-content/uploads/2019/04/18-02-08-17-29-50-859_deco.jpg";
    context.drawImage(img, 0, 0, 100, 100);
  };

преобразование холста в функцию изображения 

  const canvasToImg = _ => {
    let canvas = canvasRef.current;
    let tagA = document.createElement("a");
    document.body.appendChild(tagA);
    tagA.href = canvas.toDataURL();
    tagA.download = "canvas-image.png";
    tagA.click();
    document.body.removeChild(tagA);
  };

и вот мой пример кода и коробки

1 Ответ

1 голос
/ 29 января 2020

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

отредактированная версия 

  img.crossOrigin = "anonymous";
  img.src = "https://2.bp.blogspot.com/-VTIlinKHDHE/WXiij8jFF-I/AAAAAAAADvs/r2yZ6H6QomUfR_kNBW0F-638aCj98XZvACLcBGAs/s1600/hasil%2Bscan%2B1%2B-%2Bcara%2Bscan%2Btanda%2Btangan.jpg";

запомните источник изображения, потому что не любой сервер позволяет сделать запрос кросс-источника

...