Typescript - Uncaught DOMException: не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты не могут быть экспортированы - PullRequest
Новая
       11

Typescript - Uncaught DOMException: не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты не могут быть экспортированы

0 голосов
/ 09 января 2019

Я создаю приложение Ionic и получаю эту ошибку при попытке преобразовать в base64 изображение с URL-адреса. 

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

Мой код следующий: 

public getBase64Image(imgUrl: string): Promise<string> {
    if (!imgUrl.includes("http")) {
      return;
    }

    return new Promise<string>(resolve => {
      let img = new Image();

      img.src = imgUrl;
      img.crossOrigin = "anonymous"
      img.onload = (() => {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        let dataURL = canvas.toDataURL("image/png");
        resolve(dataURL);
      });
    });
  }

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

Надеюсь, вы сможете мне помочь, спасибо.

РЕДАКТИРОВАТЬ 1

Как примечание, я не получаю это в первый раз, когда я конвертирую изображение в base64, но я получаю его в следующий раз, когда пытаюсь отредактировать изображение.

1 Ответ

0 голосов
/ 09 января 2019

Вместо подхода, описанного в первом посте, я переключился на загрузку изображения с помощью HttpClient из Angular, а затем получил его base64.

Код: 

public getBase64Image(imgUrl: string): Observable<string> {
    return new Observable(observer => {
      this.http.get(imgUrl, { responseType: 'blob' }).subscribe(data => {
        var reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onloadend = () => {
          observer.next(reader.result.toString().replace(":application/octet-stream;", ":image/png;"));
          observer.complete();
        }
      });
    });
  }
...