使用html2canvas保存html或者div內容為圖片及自定義名稱，測試可用

<div id="first" style="width: 90%;height: 100%"> $(function(){$('#btnSave').click(function() {html2canvas(document.querySelector("#first")).then(function(canvas) {document.body.appendChild(canvas);var type = 'png';var imgData = canvas.toDataURL(type);var _fixType = function(type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;};imgData = imgData.replace(_fixType(type),'image/octet-stream');var saveFile = function(data, filename){var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};var filename = '123456' + '.' + type;if (canvas.msToBlob) {//IE9+瀏覽器var blob = canvas.msToBlob();window.navigator.msSaveBlob(blob, filename);} else {//firefox,chromesaveFile(imgData, filename);}});});});

總結

以上是生活随笔為你收集整理的使用html2canvas保存html或者div内容为图片及自定义名称的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。