我想復制一個畫布上的所有內容，然后將它們全部傳輸到客戶端上的所有內容。我認為我會使用canvas.toDataURL()and context.drawImage()方法來實現這一點，但是我遇到了一些問題。我的解決方案是將其獲取Canvas.toDataURL()并存儲在Javascript中的Image對象中，然后使用該context.drawImage()方法將其放回原處。但是，我相信該toDataURL方法會返回一個帶有64位編碼標簽的標簽"data:image/png;base64,"。這似乎不是一個有效的標簽，（我總是可以使用一些RegEx刪除它），但是"data:image/png;base64,"子字符串之后的64位編碼字符串是否是有效的圖像？我可以說image.src=iVBORw...ASASDAS，然后在畫布上畫出來嗎？我研究了一些相關問題： 使用base64將畫布圖像從一個畫布顯示到另一個畫布但是解決方案似乎并不正確。
3 回答
MMMHUHU
TA貢獻1834條經驗 獲得超8個贊
但是，在復制后實際上想要復制數據URL的地方，也可以使用此解決方案。例如，當您建立一個使用大量圖像/畫布操作的網站時。
// select canvas elements
var sourceCanvas = document.getElementById("some-unique-id");
var destCanvas = document.getElementsByClassName("some-class-selector")[0];
//copy canvas by DataUrl
var sourceImageData = sourceCanvas.toDataURL("image/png");
var destCanvasContext = destCanvas.getContext('2d');
var destinationImage = new Image;
destinationImage.onload = function(){
destCanvasContext.drawImage(destinationImage,0,0);
};
destinationImage.src = sourceImageData;
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
有一個小點讓我震驚：雖然您可以繪制畫布（HTMLCanvasElement），但不能繪制上下文（CanvasRenderingContext2D）。使用myContext.canvas代替。
- 3 回答
- 0 關注
- 3824 瀏覽
添加回答
舉報
0/150
提交
取消