页面截图之html2canvas丨技术开发分享录

页面截图之html2canvas

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"html2canvas官网:http://html2canvas.hertzen.com/\n\nhtml\n\n```html\n<script type=\"text/javascript\" src=\"https://zhangqh22.gitee.io/libs/jquery.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://zhangqh22.gitee.io/libs/vue/vue.min.js\"></script>\n<script src=\"http://html2canvas.hertzen.com/dist/html2canvas.min.js\"></script>\n\n<div id=\"js_app\">\n    <button type=\"button\" class=\"zh-screenshot\" id=\"js_screenshot\" @click=\"screenshot\">截<br>长<br>图</button>\n</div>\n```\n\njavascript\n\n```\nvar app = new Vue({\n    el: '#js_app',\n    methods: {\n      // 截图\n      screenshot: function() {\n          var _this = this;\n          $('#js_screenshot').hide();\n          // window.scrollTo(0,0); 指定区域截图防偏移\n          html2canvas(document.body).then(function(canvas) {\n              // window.open(URL.createObjectURL(_this.base64ToBlob(canvas.toDataURL())));\n              var a = document.createElement('a')\n\t\t\t\t    var event = new MouseEvent('click')\n\t\t\t\t    a.download = Date.now();\n\t\t\t\t    a.href = URL.createObjectURL(_this.base64ToBlob(canvas.toDataURL()))\n\t\t\t\t    a.dispatchEvent(event)\n              $('#js_screenshot').show();\n          });\n      },\n      // base64转换\n      base64ToBlob: function(code) {\n          var parts = code.split(';base64,');\n          var contentType = parts[0].split(':')[1];\n          var raw = window.atob(parts[1]);\n          var rawLength = raw.length;\n          var uInt8Array = new Uint8Array(rawLength);\n          for (var i = 0; i < rawLength; ++i) {\n              uInt8Array[i] = raw.charCodeAt(i);\n          }\n          return new Blob([uInt8Array], { type: contentType });\n      }\n    }\n});\n```\n\n参数传递\n\n```\nhtml2canvas(document.body, {\n  allowTaint: false,\n  useCORS: true\n}).then(function(canvas) {\n  // ...\n})\n```\n\n>[warning] 注意:如果截图内容为空白说明有滚动条,这里可以选择copy一份放在可视区或顶部供截图使用,使用完再删除;也可以通过控制滚动条把截图内容滚动到可视区处理\n\n- Blob 对象表示一个不可变、原始数据的类文件对象\n- atob() 方法用于解码使用 base-64 编码的字符串"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看