Конвертировать холст в изображение с помощью JavaScript

Question

Я хочу преобразовать холст в изображение с помощью JavaScript. Когда я пытаюсь сделать canvas.toDataURL("image/png");, он дает ошибку SecurityError: The operation is insecure. Пожалуйста, помогите мне решить эту проблему.

Заранее спасибо.

Answer 1

Вы имеете право идея, и она будет работать в очень простых случаях, таких как:

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

ctx.fillRect(50,50,50,50); 

var img = new Image(); 
img.src = can.toDataURL(); 
document.body.appendChild(img); 

http://jsfiddle.net/simonsarris/vgmFN/

Но это становится проблематичным, если у вас есть «загадили» холст. Это делается путем рисования изображений на холсте, которые имеют другое происхождение. Например, если ваш холст размещен на веб-сайте www.example.com, и вы используете изображения с сайта www.wikipedia.org, тогда ваш флаг «Исходный чистый» холста будет установлен внутри false. не

После того, как флаг происхождения очищаемые установлен в false, вы больше не разрешили позвонить toDataURL или getImageData

---

Технически, изображения одного и того же происхождения, если совпадают домены, протоколы и порты.

---

Если вы работаете локально (файл: //), то на любом обратном изображении будет установлен флаг. Это делает отладку раздражающей, но с Chrome вы можете запустить ее с флагом --allow-file-access-from-files, чтобы это разрешить.

Answer 2

Это работало для меня

//after creating your plot do 
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data 
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it 
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //