html5 - title速度 - tr tag




如何將一個畫布的內容複製到另一個畫布本地 (2)

@ robert-hurst有一個更清晰的方法,但是當你真的想在復制後擁有一個Data Url的副本時,這個解決方案可能會用到。 示例:當您構建使用大量圖像/畫布操作的網站時。

    // select canvas elements
    var sourceCanvas = document.getElementsById("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;

我想複製一個畫布的所有內容,並將它們轉移到另一個全部在客戶端。 我會認為我會使用canvas.toDataURL()context.drawImage()方法來實現這一點,但我遇到了一些問題。

我的解決方案是獲取Canvas.toDataURL()並將其存儲在JavaScript中的Image對像中,然後使用context.drawImage()方法將其放回。

但是,我相信toDataURL方法會返回一個帶有"data:image/png;base64,"的64位編碼標籤,並將其作為前綴。 這似乎不是一個有效的標記,(我總是可以使用一些正則表達式來刪除它),但是在64位編碼的字符串後面的"data:image/png;base64,"子字符串有效的圖像? 我可以說image.src=iVBORw...ASASDAS ,然後在畫布上繪製它?

我查看了一些相關的問題: 使用base64將畫布圖像從一個畫布顯示到另一個畫布

但是這些解決方案似乎並不正確。


其實你根本不需要創建一個圖像。 drawImage()將接受一個Canvas以及一個Image對象。

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

比使用ImageData像或Image元素快得多。

請注意, sourceCanvas可以是HTMLImageElementHTMLVideoElementHTMLCanvasElement 。 正如Dave在此答案下的評論中所提到的,您不能使用畫布上下文作為源 。 如果您有一個畫布繪製上下文,而不是從其創建的畫布元素,則會在context.canvas下的上下文中引用原始畫布元素。

這裡是一個jsPerf來演示為什麼這是克隆一個畫布的唯一正確方法: http://jsperf.com/copying-a-canvas-element : http://jsperf.com/copying-a-canvas-element





canvas