使用Internet Explorer將jpeg保存爲畫布

我使用canvas2image保存「合成」圖像。它會在新窗口中打開，並可以右鍵單擊並保存。這工作得很好，所以我將它展示給正在運行IE的客戶端，當然這對他不起作用！使用Internet Explorer將jpeg保存爲畫布

我已經閱讀了幾乎所有與此相關的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不會讓我右鍵單擊並保存？

來源

2015-08-28 nzdavo

您確定數據網址有效嗎？如果是這樣，請嘗試在DOM中創建一個''標籤並在其中加載數據URL。 [IE不會讓你加載地址欄中的數據網址]（https://stackoverflow.com/a/8453636/689161）。 – gengkev

對不起 - 希望有一種方法來表明你的編碼水平！我對此非常新鮮，已經進入了我的頭腦！我不確定如何檢查數據網址是否正常工作....現在去做一些閱讀！ – nzdavo

我只是不確定IE是否真的能夠生成你想要的數據URL; 'console.log（img）'應該就夠了。 – gengkev

Got it！非常感謝卡爾和他的帖子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>

來源

2015-09-01 04:16:51 nzdavo

使用Internet Explorer將jpeg保存爲畫布

回答

相關問題