Конвертирующий холст, который использует метод drawimage для png

Question

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

Проблема в том, что JavaScript каким-то образом не преобразовывает холст в данные изображения.

Проверить jsfiddle здесь: http://jsfiddle.net/julekker/tjYzw/1/

Я пытался использовать window.location = finalcanvas.toDataURL("image/png"); и

var img = finalcanvas.toDataURL("image/png"); 
document.write('<img src="'+img+'"/>'); 

Но они оба не работают.

Как вы можете преобразовать изображение холста, которое использует метод drawImage для png-данных?

Answer 1

В коде jsfiddle вы, кажется, нарисовываете внешнее изображение на холсте. Это предотвратит получение доступа к данным пикселя и toDataURL, если это является междоменным доступом по соображениям безопасности.

Этот вопрос был рассмотрен здесь много раз; см. Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation для обсуждения использования CORS для решения этой проблемы и поддержки браузера. Другим вариантом может быть загрузка изображений через локальный прокси.