{"id":8979,"date":"2022-09-16T15:29:13","date_gmt":"2022-09-16T07:29:13","guid":{"rendered":"https:\/\/sdeno.com\/?p=8979"},"modified":"2022-09-16T15:52:45","modified_gmt":"2022-09-16T07:52:45","slug":"%e5%be%ae%e4%bf%a1%e5%85%ac%e4%bc%97%e5%8f%b7canvas%e5%8f%a6%e5%ad%98%e4%b8%ba%e5%9b%be%e7%89%87%e5%b9%b6%e4%b8%8b%e8%bd%bd%e5%88%b0%e6%9c%ac%e5%9c%b0","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8979","title":{"rendered":"\u5fae\u4fe1\u516c\u4f17\u53f7canvas\u53e6\u5b58\u4e3a\u56fe\u7247\u5e76\u4e0b\u8f7d\u5230\u672c\u5730"},"content":{"rendered":"<p>\u516c\u4f17\u53f7 canvas base64 \u53e6\u5b58\u4e3a \u56fe\u7247 \u672c\u5730 \u4e0b\u8f7d \u4fdd\u5b58<\/p>\n<p>\u601d\u8def\u662f\uff1ahtml2canvas\u622a\u56fecanvas\u7684\u56fe\u50cf\u4fdd\u5b58\u4e3abase64\uff0cbase64\u5728\u4e13\u4e3ablob\uff0c\u653e\u5230a\u6807\u7b7e\u4e0b\u5373\u53ef\u4e0b\u8f7d\u4fdd\u5b58\u5230\u672c\u5730<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;script src=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"&gt;&lt;\/script&gt;\r\n\r\n\r\n&lt;div id=\"codepic\"&gt;\r\n  &lt;canvas&gt;&lt;\/canvas&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;button onclick=\"download()\"&gt;\u4fdd\u5b58\u56fe\u7247&lt;\/button&gt;\r\n\r\n\r\nwindow.download=function (){\r\n       new html2canvas(document.getElementById('codepic')).then(canvas =&gt; {  \/\/id=\"codepic\"\u662f\u9700\u8981\u622a\u56fe\u7684\u533a\u57df\r\n           \/\/ canvas\u4e3a\u8f6c\u6362\u540e\u7684Canvas\u5bf9\u8c61\r\n           let oImg = new Image();\r\n           oImg.src = canvas.toDataURL();  \/\/ \u5bfc\u51fa\u56fe\u7247\r\n           \/\/ document.getElementById('tupian').appendChild(oImg);  \/\/ \u5c06\u751f\u6210\u7684\u56fe\u7247\u6dfb\u52a0\u5230body\r\n\r\n           var date = new Date();\r\n\r\n           var aLink = document.createElement(\"a\"); \/\/ \u521b\u5efa\u4e00\u4e2aa\u6807\u7b7e\r\n           var blob = base64ToBlob(canvas.toDataURL());\r\n           var event = document.createEvent(\"HTMLEvents\");\r\n           event.initEvent(\"click\", true, true);\r\n           aLink.download = date.getTime() + \".\" + blob.type.split(\"\/\")[1]; \/\/ \u4f7f\u7528\u65f6\u95f4\u6233\u7ed9\u6587\u4ef6\u547d\u540d\r\n           aLink.href = URL.createObjectURL(blob);\r\n           aLink.click();\r\n\r\n\r\n           \/\/ base64\u8f6cBlob\u5bf9\u8c61\r\n           function base64ToBlob(code) {\r\n               var parts = code.split(\";base64,\");\r\n               var contentType = parts[0].split(\":\")[1];\r\n               var raw = window.atob(parts[1]);\r\n               var rawLength = raw.length;\r\n               var uint8Array = new Uint8Array(rawLength);\r\n               for (var i = 0; i &lt; rawLength; i++) {\r\n                   uint8Array[i] = raw.charCodeAt(i);\r\n               }\r\n               return new Blob([uint8Array], {type: contentType});\r\n           }\r\n\r\n\r\n       });\r\n   }<\/pre>\n<p>\u53e6\u5b58\u4e3a\u56fe\u7247\u9700\u8981\u70b9\u51fb\u53f3\u4e0a\u89d2\u7528\u672c\u5730\u6d4f\u89c8\u5668\u8bbf\u95ee\u540e\u624d\u80fd\u4fdd\u5b58<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/blog.csdn.net\/m0_46357847\/article\/details\/124771866\" target=\"_blank\" rel=\"noopener\">https:\/\/blog.csdn.net\/m0_46357847\/article\/details\/124771866<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u516c\u4f17\u53f7 canvas base64 \u53e6\u5b58\u4e3a \u56fe\u7247 \u672c\u5730 \u4e0b\u8f7d \u4fdd\u5b58 \u601d\u8def\u662f\uff1ahtml2canvas\u622a\u56fecanv [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8979","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8979"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8979\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}