如何使用HTML2canvas将img保存到用户的本地计算机

概述我正在使用 HTML2canvas .4.1渲染一个截图,并将图像保存到用户的本地计算机.这怎么可以实现？请注意,我是初学者,所以实际的代码对我来说最有帮助. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" 我正在使用 HTML2canvas .4.1渲染一个截图,并将图像保存到用户的本地计算机.这怎么可以实现？请注意,我是初学者,所以实际的代码对我来说最有帮助.

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.11.3/jquery.min.Js"></script><script type="text/JavaScript" src="HTML2canvas.Js"></script><button ID="save_image_locally">download img</button>   <div ID="imagesave">      <img ID='local_image' src='img1.jpg'>   </div><script>    $('#save_image_locally').click(function(){            HTML2canvas($('#imagesave'),{                onrendered: function (canvas) {                    var img = canvas.toDataURL("image/png");                    alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. IDeally as a jpg instead of png.');                    window.open(img);                }             });            });</script>

解决方法 尝试这样(请注意,Safari会在同一个标​​签页中打开图片,而不是下载它; Safari中不支持下载属性)

<script>  $('#save_image_locally').click(function(){    HTML2canvas($('#imagesave'),{      onrendered: function (canvas) {        var a = document.createElement('a');        // toDataURL defaults to png,so we need to request a jpeg,then convert for file download.        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg","image/octet-stream");        a.download = 'somefilename.jpg';        a.click();      }    });  });</script>

总结

以上是内存溢出为你收集整理的如何使用HTML2canvas将img保存到用户的本地计算机全部内容，希望文章能够帮你解决如何使用HTML2canvas将img保存到用户的本地计算机所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。