{"id":1524,"date":"2021-01-22T16:55:56","date_gmt":"2021-01-22T08:55:56","guid":{"rendered":"http:\/\/123.57.164.21\/?p=1524"},"modified":"2021-01-30T14:53:57","modified_gmt":"2021-01-30T06:53:57","slug":"%e5%9c%a8vue%e9%a1%b9%e7%9b%ae%e4%b8%ad%e4%bd%bf%e7%94%a8html2canvas%e7%94%9f%e6%88%90%e9%a1%b5%e9%9d%a2%e6%88%aa%e5%9b%be%e5%b9%b6%e4%b8%8a%e4%bc%a0","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=1524","title":{"rendered":"\u5728Vue\u9879\u76ee\u4e2d\u4f7f\u7528html2canvas\u751f\u6210\u9875\u9762\u622a\u56fe\u5e76\u4e0a\u4f20"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">\u5b89\u88c5 html2canvas<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- \u628a\u9700\u8981\u751f\u6210\u622a\u56fe\u7684\u5143\u7d20\u653e\u5728\u4e00\u4e2a\u5143\u7d20\u5bb9\u5668\u91cc,\u8bbe\u7f6e\u4e00\u4e2aref -->\n&lt;div class=\"image_tofile\" ref=\"imageTofile\">\n\u3000\u3000&lt;!-- \u8fd9\u91cc\u653e\u9700\u8981\u622a\u56fe\u7684\u5143\u7d20,\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5143\u7d20\u4e5f\u53ef\u4ee5 -->\n&lt;\/div>\n&lt;!-- \u5982\u679c\u9700\u8981\u5c55\u793a\u622a\u53d6\u7684\u56fe\u7247,\u7ed9\u4e00\u4e2aimg\u6807\u7b7e -->\n&lt;img :src=\"htmlUrl\"><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">VUE\u4ee3\u7801<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u5f15\u5165html2canvas\n\nimport html2canvas from 'html2canvas'\n\n\/\/ \u6ce8\u518c\u7ec4\u4ef6\n\ndata() {\n\u3000\u3000return {\n\u3000\u3000\u3000\u3000htmlUrl: ''\n\u3000\u3000}\n},\ncomponents: {\n\u3000\u3000html2canvas\n},\nmethods: {\n\u3000\u3000\/\/ \u9875\u9762\u5143\u7d20\u8f6c\u56fe\u7247\n\u3000\u3000toImage() {\n\u3000\u3000\u3000\u3000\/\/ \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u9700\u8981\u751f\u6210\u622a\u56fe\u7684\u5143\u7d20,\u7b2c\u4e8c\u4e2a\u662f\u81ea\u5df1\u9700\u8981\u914d\u7f6e\u7684\u53c2\u6570,\u5bbd\u9ad8\u7b49\n\u3000\u3000\u3000\u3000html2canvas(this.$refs.imageTofile, {\n\u3000\u3000\u3000\u3000\u3000\u3000backgroundColor: null\n\u3000\u3000\u3000\u3000}).then((canvas) => {\n\u3000\u3000\u3000\u3000\u3000\u3000let url = canvas.toDataURL('image\/png');\n\u3000\u3000\u3000\u3000\u3000\u3000this.htmlUrl = url;\n\u3000\u3000\u3000\u3000\u3000\u3000\/\/ \u628a\u751f\u6210\u7684base64\u4f4d\u56fe\u7247\u4e0a\u4f20\u5230\u670d\u52a1\u5668,\u751f\u6210\u5728\u7ebf\u56fe\u7247\u5730\u5740\n\u3000\u3000\u3000\u3000\u3000\u3000this.sendUrl();\n\u3000\u3000\u3000\u3000})\n\u3000\u3000},\n\u3000\u3000\/\/ \u56fe\u7247\u4e0a\u4f20\u670d\u52a1\u5668\n\u3000\u3000sendUrl () {\n\u3000\u3000\u3000\u3000\/\/ \u5982\u679c\u56fe\u7247\u9700\u8981formData\u683c\u5f0f,\u5c31\u81ea\u5df1\u7ec4\u88c5\u4e00\u4e0b,\u4e3b\u8981\u770b\u540e\u53f0\u9700\u8981\u4ec0\u4e48\u53c2\u6570\n\u3000\u3000\u3000   \/\/ const formData = new FormData()\n\u3000\u3000\u3000\u3000\/\/ formData.append('base64', this.company.fileUrl)\n\u3000\u3000\u3000\u3000\/\/ formData.append('userId', 123)\n\u3000\u3000\u3000\u3000\/\/ formData.append('pathName', 'pdf')\n\u3000\u3000\u3000\u3000this.$ajax({\n\u3000\u3000\u3000\u3000\u3000\u3000url: apiPath.common.uploadBase,\n\u3000\u3000\u3000\u3000\u3000\u3000method: 'post',\n\u3000\u3000\u3000\u3000\u3000\u3000data: this.htmlUrl\n\u3000\u3000\u3000\u3000}).then(res => {\n\u3000\u3000\u3000\u3000\u3000\u3000if (res.code &amp;&amp; res.data) {\n \n\u3000\u3000\u3000\u3000\u3000\u3000}\n\u3000\u3000\u3000\u3000})\n\u3000\u3000}\n}<\/pre>\n\n\n\n<p>\u4f46\u662f\u4e0a\u9762\u7684\u5199\u6cd5\u53ea\u80fd\u622a\u53d6Html\u753b\u9762\u7684\u4e00\u822c\u63a7\u4ef6\uff0c\u5047\u5982\u6211\u4eec\u9700\u8981\u622a\u53d6video\u6807\u7b7e\u753b\u9762\u7684\u8bdd\uff0c\u8fd9\u4e2a\u5199\u6cd5\u5c31\u4e0d\u884c\u4e86\u3002video\u622a\u56fe\u7684\u8bdd\uff0c\u53ef\u4ee5\u7528\u4e0b\u9762\u7684\u5199\u6cd5\u3002\u6ce8\u610fvideo\u6807\u7b7e\u4e2d\u8981\u52a0\u4e0a <strong>crossorigin=&#8221;Anonymous&#8221;<\/strong>\uff0c \u5426\u5219\u4f1a\u51fa\u9519\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;template>\n  &lt;div class=\"hello\">\n   &lt;button @click=\"toImage\">\u622a\u56fe&lt;\/button>\n   &lt;div >\n    &lt;video id=\"video1\"  width=\"550\" controls=true src='http:\/\/xxx:8888\/xxx.mp4' preload=\"metadata\" crossorigin=\"Anonymous\">&lt;\/video> \n  &lt;\/div>\n&lt;\/template>\n\n&lt;script>\nexport default {\n  name: \"HelloWorld\",\n  data() {\n    return {\n      htmlUrl: ''\n    };\n  },\n\n  methods: {\n\n    \u3000\u3000\/\/ \u9875\u9762\u5143\u7d20\u8f6c\u56fe\u7247\n\u3000\u3000    toImage() {\n            var video = document.getElementById(\"video1\");\n            var canvas = document.createElement(\"canvas\");\n            canvas.width = video.videoWidth * 1;\n            canvas.height = video.videoHeight * 1;\n            canvas.getContext('2d')\n                .drawImage(video, 0, 0, canvas.width, canvas.height);\n            this.htmlUrl = canvas.toDataURL('image\/png');\n\u3000\u3000},\n  },\n};\n&lt;\/script>\n<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2021\/01\/image-50-848x1024.png\" alt=\"\" class=\"wp-image-1528\" width=\"466\" height=\"562\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50-848x1024.png 848w, https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50-248x300.png 248w, https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50-768x928.png 768w, https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50-830x1003.png 830w, https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50-230x278.png 230w, https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50-350x423.png 350w, https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50-480x580.png 480w, https:\/\/92it.top\/wp-content\/uploads\/2021\/01\/image-50.png 1134w\" sizes=\"(max-width: 466px) 100vw, 466px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5 html2canvas VUE\u4ee3\u7801 \u4f46\u662f\u4e0a\u9762\u7684\u5199\u6cd5\u53ea\u80fd\u622a\u53d6Html\u753b\u9762\u7684\u4e00\u822c\u63a7\u4ef6\uff0c\u5047\u5982\u6211\u4eec\u9700\u8981\u622a\u53d6vid [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/1524"}],"collection":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1524"}],"version-history":[{"count":4,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/1524\/revisions"}],"predecessor-version":[{"id":1531,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/1524\/revisions\/1531"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}