{"id":8156,"date":"2020-09-11T01:51:23","date_gmt":"2020-09-10T17:51:23","guid":{"rendered":"https:\/\/sdeno.com\/?p=8156"},"modified":"2020-09-11T01:55:19","modified_gmt":"2020-09-10T17:55:19","slug":"js%e6%88%aa%e5%9b%behtml2canvas-js","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8156","title":{"rendered":"js\u7f51\u9875\u622a\u56fe|\u5c4f\u5e55\u622a\u56fehtml2canvas.js"},"content":{"rendered":"<p><span style=\"color: #ff0000;\">\u5c4f\u5e55\u622a\u56fe\uff1a<\/span><\/p>\n<pre>new html2canvas(document.getElementById('app')).then(canvas =&gt; {  \/\/id=\"app\"\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.body.appendChild(oImg);  \/\/ \u5c06\u751f\u6210\u7684\u56fe\u7247\u6dfb\u52a0\u5230body\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">\u7f51\u9875\u622a\u56fe\uff1a<\/span><\/p>\n<p>\uff08\u6709\u4e00\u4e2abug\uff0c\u672c\u5730\u52a0\u8f7d\u7684\u56fe\u7247\u53ef\u4ee5\u622a\u56fe\u5230\u5185\u5bb9\uff0c\u4f46\u5982\u679c\u662f\u901a\u8fc7\u8bf7\u6c42\u540e\u53f0\u63a5\u53e3\u5f97\u5230\u7684\u56fe\u7247\u5c31\u622a\u56fe\u4e0d\u5230\u56fe\u7247\u5185\u5bb9\u4e86\uff09<\/p>\n<pre>var height = $(document).height() \/\/\u83b7\u53d6\u9700\u8981\u622a\u56fe\u5185\u5bb9\u7684\u9ad8\u5ea6\r\n\/\/\u514b\u9686\u8282\u70b9\uff0c\u9ed8\u8ba4\u4e3afalse\uff0c\u4e0d\u590d\u5236\u65b9\u6cd5\u5c5e\u6027\uff0c\u4e3atrue\u662f\u5168\u90e8\u590d\u5236\u3002\r\nvar cloneDom = $(\"#app\").clone(true);\/\/\u514b\u9686\u8981\u622a\u56fe\u7684\u533a\u57df\r\n\/\/\u8bbe\u7f6e\u514b\u9686\u8282\u70b9\u7684css\u5c5e\u6027\uff0c\u56e0\u4e3a\u4e4b\u524d\u7684\u5c42\u7ea7\u4e3a0\uff0c\u6211\u4eec\u53ea\u9700\u8981\u6bd4\u88ab\u514b\u9686\u7684\u8282\u70b9\u5c42\u7ea7\u4f4e\u5373\u53ef\u3002\r\ncloneDom.css({\r\n    \/\/\"display\": \"none\",\r\n    \"position\": \"absolute\",\r\n    \"top\": \"0px\",\r\n    \"z-index\": \"-111\",\r\n    \"height\": height\r\n});\r\n\/\/\u5c06\u514b\u9686\u8282\u70b9\u52a8\u6001\u8ffd\u52a0\u5230body\u540e\u9762\u3002\r\n\r\n$(\"body\").append(cloneDom);\r\nconsole.log(cloneDom)\r\nhtml2canvas(cloneDom[0]).then(function(canvas){\r\n    function getBlobBydataURI(dataURI,type){\r\n        var binary = atob(dataURI.split(',')[1]);\r\n        var array = [];\r\n        for(var i = 0; i &lt; binary.length; i++) {\r\n            array.push(binary.charCodeAt(i));\r\n        }\r\n        return new Blob([new Uint8Array(array)], {type:type });\r\n    }\r\n    var imageData = canvas.toDataURL(\"image\/jpeg\");\r\n\r\n    var formData = new FormData();\r\n\r\n    var $Blob= getBlobBydataURI(imageData,'image\/jpeg');\r\n\r\n\r\n    let reader = new FileReader();\r\n\r\n\r\n    reader.readAsDataURL($Blob);\r\n\r\n\r\n    reader.onload = function(e) {\r\n        var img = document.createElement(\"img\");\r\n        img.src = e.target.result;\r\n        document.body.appendChild(img);\r\n        console.log(img)\r\n    }\r\n\r\n    formData.append('file',$Blob);\r\n    formData.append('type',1)\r\n    var timestamp = new Date().getTime();\r\n    formData.append('key',timestamp + '.png');\/\/\u5f97\u5230\u4ee5\u5f53\u524d\u65f6\u95f4\u547d\u540d\u7684\u56fe\u7247\u6587\u4ef6\r\n    for (var pair  of formData.entries()) {\r\n\r\n        if(typeof value == 'object'){\r\n            if(value.hasOwnProperty(\"name\")){\r\n                pair[1].name = \"1.jpg\"\r\n            }\r\n        }\r\n    }\r\n\r\n\r\n\r\n    \/\/\u4e0a\u4f20\r\n    \/\/ $.ajax({\r\n    \/\/     url:'http:\/\/devh.bugegaming.com\/api2\/turntable\/upload',\r\n    \/\/     type:'post',\r\n    \/\/     data:formData,\r\n    \/\/     async: false,\r\n    \/\/     crossDomain: true,\r\n    \/\/     contentType: false,\r\n    \/\/     processData: false,\r\n    \/\/     success: function(data){\r\n    \/\/\r\n    \/\/     }\r\n    \/\/ });\r\n})<\/pre>\n<p><a href=\"https:\/\/blog.csdn.net\/huangxinglian\/article\/details\/80582299?utm_medium=distribute.pc_relevant.none-task-blog-title-2&amp;spm=1001.2101.3001.4242\" target=\"_blank\" rel=\"noopener\">https:\/\/blog.csdn.net\/huangxinglian\/article\/details\/80582299?utm_medium=distribute.pc_relevant.none-task-blog-title-2&amp;spm=1001.2101.3001.4242<\/a><\/p>\n<p><a href=\"https:\/\/sdeno.com\/wp-content\/uploads\/2020\/08\/html2canvas.min.js\" target=\"_blank\" rel=\"noopener\">https:\/\/sdeno.com\/wp-content\/uploads\/2020\/08\/html2canvas.min.js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5c4f\u5e55\u622a\u56fe\uff1a new html2canvas(document.getElementById(&#8216;app&#8217;)).t [&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-8156","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8156","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=8156"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8156\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}