我正在使用
@L_403_0@2canvas .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>