dynamicjs畫布到本地html頁面上的圖像

Question

我試圖以與本教程類似的方式生成我的dynamicjs畫布的圖像。 （盡管與示例不同，我的畫布確實包含來自本地子目錄的圖像。）

但是，我知道以下幾點：

toDataURL（）方法要求將繪制到畫布上的任何圖像都托管在Web服務器上，該服務器與執行該代碼的代碼具有相同的域。 如果不滿足此條件，則將引發SECURITY_ERR異常。

但是，我要求能夠在本地html頁面上生成圖像。 無論如何，都可以使用toDataURL或任何其他圖像生成方法來解決上述安全要求嗎？

Answer 1

您可以使用從網上獲得的任何圖像作為Kinetic.Image的來源。

因此，您可以在本地html頁面上顯示該圖像。

然后，您不能做的就是將該網頁導出為帶有toDataURL的圖像。

您也無法使用context.getImageData檢查像素數組。

如果您僅繪制rects / circles / etc，但沒有外部圖像，那您就很好。

如果下載Web映像並將其保存在本地驅動器上，則該映像仍然是“臟”的，並且會導致安全錯誤-即使它現在位於本地計算機上。

解決方法：

有時這可行：

從網上獲取圖像，在Photoshop中對其進行修改，然后將新文件另存為與將使用該文件的動態.html文件相同的目錄。 這通常會從圖像中刪除“臟”標志。

或者，您可以在本地計算機上安裝Web服務器（這些天沒什么大不了的）。 我在想IIS或WAMP。

如果您願意避免使用Internet Explorer，則可以將圖像托管在允許跨域訪問圖像的站點上。 這樣的托管網站之一是dropbox.com。 然后，您可以將crossOrigin標志設置為“ anonymous”來加載圖像，並且所得圖像不會是“ dirty”。

var img=new Image();
img.onload= ...
img.crossOrigin="anonymous";
img.src="yourDropboxImage.png";