2014-09-29 40 views
0

我试图将画布导出为png图像。我用下面的代码来做到这一点。将画布导出为图像在IE中不起作用

function onExport() { 
     var canvas = $("#container_canvas")[0]; //id of the canvas 
     var dt = canvas.toDataURL(); 
     this.href = dt; 
    } 

这适用于除IE以外的所有其他浏览器。没有行动发生。我使用IE 10版本。 帮我解决这个问题。谢谢。

+0

这是什么$( “#container_canvas”)[0] ??你已经使用了一个jQuery选择器,它会返回你的ID然后[0]为什么..试图调试,并得到什么“$(”#container_canvas“)[0]”返回? – 2014-09-29 06:32:36

回答

0

下面是一个更完整的从画布创建html img元素的示例。

它在IE10中正常工作。

如果用户需要,他们可以右键单击“保存”作为新的img。

实施例的代码和一个演示:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 

 
ctx.fillStyle='skyblue'; 
 
ctx.fillRect(50,50,150,55); 
 
ctx.strokeRect(50,50,150,55); 
 
ctx.fillStyle='white'; 
 
ctx.font='14px verdana'; 
 
ctx.fillText('Click the canvas',55,65); 
 
ctx.fillText('to save it as',55,80); 
 
ctx.fillText('a new image',55,95); 
 

 

 
canvas.addEventListener("click",function(){ 
 
    var img=new Image(); 
 
    img.onload=function(){ 
 
    document.body.appendChild(img); 
 
    } 
 
    img.src=canvas.toDataURL(); 
 
});
body{ background-color: ivory; } 
 
canvas{border:1px solid red;} 
 
img{border:1px solid blue;}
<h4>Click the canvas. The new blue element is an img</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>