Canvas и crossOrigin?

Question

[Богдан]

Здравствуйте. Подскажите пожалуйста, как правильно сделать что бы можно было в канвасе редактировать изображение, а то вылазит ошибка?

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Нашел, только такое решение, может можно как-то проще сделать?

const loadImageCrossOrigin = url => new Promise((resolve, reject) => {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = url;
  img.onerror = error => reject(error);
  img.onload = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0);

    resolve(canvas.toDataURL('image/jpeg'));
  };
});

Спасибо.

Answer 1

[twobomb]

Изображения которые редактируете и скрипт должны лежать на одном домене.
Для разработки установите например апач и разрабатывайте скрипт на нем.
P.S. Помоему даже если положите скрипт и изображения в одну папку на рабочем столе, не на сервере то оно будет выдавать ошибку. Не говоря уже о том что разрабатываете на каким нибудь jsfiddle\codepen, а изображения берет из гугл картинок...