Question

我正在使用canvas2image来保存“复合”图像。它将在新窗口中打开，可以右键单击并保存。这很好用，所以我把它呈现给运行IE的客户端，当然它不适合他！

我已经在Stackoverflow上阅读了与此相关的所有内容，但没有到达任何地方。

如何让IE打开画布并让我保存？

这是我正在使用的脚本：

$('#save_image_locally').click(function(){

        html2canvas($('#picture_frame'), 
         {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png");
                alert('Your image will open in a new window. Please right click the image and save.');
                window.open(img);
            }
         });
        });

新窗口打开是IE，但它是空白的。我也尝试在同一页面上的div中打开画布，效果很好但IE不会让我右击并保存？

Answer 1

知道了！非常感谢卡尔和他的帖子here

解决方法是使用html2canvas.js，filesaver.js和canvas-toBlob.js进行兼容性填充。

对于像我这样需要更多信息的人：

下载上面的库，然后将其放在头标记中：

   <script type="text/javascript" src="html2canvas.js"></script>
   <script type="text/javascript" src="FileSaver.js"></script>
   <script type="text/javascript" src="canvas-toBlob.js"></script>

然后我设置了html：

<button id="save_image_locally">download img</button>
<div id="imagesave" style="height:200px; width:200px;">
<img id='local_image' src='http://www.example.com/Images/Example.jpg'>
</div>

最后，这里是强制IE（和其他浏览器）将画布保存为图像的脚本：

<script>
$('#save_image_locally').click(function(){
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
canvas.toBlob(function(blob) {
saveAs(blob, "savedcanvasimage.jpeg");
}, "image/jpeg");
}
});
});
</script>

使用Internet Explorer将canvas保存为jpeg

1 个答案: