HTML5 canvas toDataURL不适用于画布上的图像

Question

What i want to do is to draw an image that I have saved locally onto a canvas. 我想做的是将本地保存的图像绘制到画布上。 I then want to convert that canvas to a png image. 然后，我想将该画布转换为png图像。 The image loads on the canvas but the png image that I create is blank. 该图像加载到画布上，但是我创建的png图像为空白。 Does anyone know how to fix this? 有谁知道如何解决这一问题？

 <!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

You need to create your image inside onload handler 您需要在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