HTML5 canvas toDataURL不適用於畫布上的圖像

Question

我想做的是將本地保存的圖像繪制到畫布上。 然后，我想將該畫布轉換為png圖像。 該圖像加載到畫布上，但是我創建的png圖像為空白。 有誰知道如何解決這一問題？

 <!DOCTYPE html> <html> <head> </head> <body> <img src="" id="canvasImage" /> <canvas id="canvasId" width="160" height="145"></canvas> <script> var canvas = document.getElementById('canvasId'); var context = canvas.getContext("2d"); image = new Image(); image.src = "images/rightarrow.png"; image.onload = function(){ context.drawImage(image, 0, 0); } var imgTag = canvas.toDataURL("image/png"); document.getElementById("canvasImage").src = imgTag; </script> </body> </html>

Answer 1

您需要在onload處理程序中創建映像

        image = new Image();
        image.src = "images/rightarrow.png";
        image.onload = function(){
            context.drawImage(image, 0, 0);
            var imgTag = canvas.toDataURL("image/png");
            document.getElementById("canvasImage").src = imgTag;
        }

HTML5 canvas toDataURL不適用於畫布上的圖像

問題描述

1 個解決方案

解決方案1
1 2014-11-27 20:53:59

HTML5 canvas toDataURL不適用於畫布上的圖像

問題描述

1 個解決方案

解決方案1 1 2014-11-27 20:53:59

解決方案1
1 2014-11-27 20:53:59