canvas toDataURL() - операция небезопасна

Question

Я использую fabric.js для рисования аннотаций на странице. Теперь я хочу сохранить незагруженную страницу как есть, а не перерисовывать все элементы на стороне сервера с помощью JSON.

У меня есть основное изображение загружается как:

function redrawPage(src) { 
       var deferred = $q.defer(); 

       fabric.Image.fromURL(src, function (img) { 
        zoom.reset(); 
        transformation.reset(); 

        mainImage = img; 
        mainImage.set({ 
         left: 0, 
         top: 0 
        }); 
        mainImage.hasRotatingPoint = true; 
        mainImage.selectable = false; 

        canvas.clear(); 
        canvas.setWidth(mainImage.getWidth()); 
        canvas.setHeight(mainImage.getHeight()); 
        canvas.add(mainImage); 

        canvas.renderAll(); 

        deferred.resolve(); 
       }); 

       return deferred.promise; 
      } 

и когда я хочу, чтобы отправить данные холст изображения должны быть сохранены в виде аннотированных версии оригинального изображения, я получаю «Операция небезопасна» ошибка.

function getImageData() { 
    var context = canvas.getContext('2d'), 
     imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

    return imageData.data; 
} 

веб-сервер, с которого я загружаю изображения не позволяет crossOrigin установлен в положение «Anonymus»

Answer 1

Если хост изображение не разрешить анонимный доступ, то ваш .getImageData & .toDataURL всегда будет терпеть неудачу, потому что полотно испорчено. Никакого прочного решения для этого.

Вы можете копировать (или перенаправлять) изображение на свой собственный сервер и доставлять его из того же домена, что и ваша веб-страница. Это удовлетворяет ограничениям перекрестного происхождения, поэтому ваш холст не будет испорчен, а ваш .getImageData будет успешным. Конечно, применяются законы об авторском праве.

Существует несколько других обходных решений, в которых пользователь подтверждает, что они хотят, чтобы изображение загружалось по принципу кросс-оригинала. Вот соответствующий Stackoverflow post.