canvas.drawImage .toDataURL

Question

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

может ли кто-нибудь дать мне идею, почему? и, возможно, как это исправить и получить данные URI из него

вот мой код

JS

var canvas = document.getElementById('canvas1'); 
var context = canvas.getContext('2d'); 

var watermark = new Image(); 
watermark.src = "http://dummyimage.com/80x80/red/ffffff"; 

var img = new Image(); 
img.src = "http://dummyimage.com/500x700/303030/ffffff"; 

context.drawImage(img, 0, 0); 
context.drawImage(watermark,0,0,50,50); 

HTML

<canvas width="500" height="700" id="canvas1"></canvas> 

пытался с context.toDataURL('image/png');, но он не возвращает

Here's a link to my bin

Answer 1

toDataURL метод существует на холсте, а не в контексте.

Следующая ошибка, которую вы получите после фиксации, который:

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

Изображение должно существовать в той же области, чтобы исправить это.

Возможно, вам также придется предварительно загрузить изображения.