將畫布轉換爲帶有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

---

從技術上講，圖像是同出一源，如果域，協議和端口相匹配。

---

如果你在本地工作（file：//），那麼繪製的任何圖像都會將該標誌設置。這使得調試變得煩人，但使用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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //