--- highlight: agate --- > 将DOM页面中的一部分（动态生成的二维码、动态生成海报）转化为图片，甚至点击下载按钮，将这部分保存为图片下载到手机里或者电脑上，是一个非常常见的需求，而使用canvas转也是非常麻烦，于是找到html2canvas。前提：npm下载html2canvas0.5.0-beta02版本的依赖包 html2canvas 中npm 包官方文档：https://www.npmjs.com/package/html2canvas # 在项目中的使用 ## 一、安装html2canvas ```js npm install --save html2canvas ``` ## 二、在项目中使用 ```js import html2canvas from 'html2canvas'; ``` ### 页面(saveImg组件)具体如下： **vue文件** ```html

``` **less文件** ```less @import '../../assets/less/mixin.less'; .canvasBox { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, .8); /* 需裁剪的位置 */ .canvasMain { position: absolute; top: 0; right: 0; left: 0; bottom: 2.56rem; width: 5.5rem; height: 7.7rem; border-radius: 0.12rem; margin: auto; overflow: hidden; .canvasContent { width: 100%; height: 100%; margin: auto; overflow: hidden; // background-color: #fff; // background-repeat: no-repeat; // background-size: 100% 100%; // background-position: center center; background: #fff no-repeat center center / 100% 100%; position: absolute; z-index: 90; font-size: 24px; color: #333; .top { display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 28px; .avatar { width: 98px; height: 98px; img { width: 100%; height: 100%; border-radius: 50%; } } .name { width: 100%; font-size: 26px; font-weight: bold; padding-top: 20px; .textOverflow(); } } .content { .title { color: #666; padding-top: 20px; font-size: 26px; font-weight: normal; } .base_info { display: flex; justify-content: space-between; padding: 38px 30px 40px 30px; border-bottom: 1px solid #efefef; div { text-align: left; width: 50%; display: flex; justify-content: flex-start; img { width: 26px; height: 26px; } span { padding-left: 12px; flex: 1; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } .address { display: flex; height: 98px; justify-content: flex-start; padding: 20px 30px 25px 30px; border-bottom: 1px solid #efefef; box-sizing: border-box; img { width: 26px; height: 26px; } span { text-align: left; line-height: 28px; padding-left: 12px; overflow: hidden; text-overflow: ellipsis; } } .business_scope { height: 276px; padding: 20px 30px 18px 30px; border-bottom: 1px solid #efefef; box-sizing: border-box; overflow: hidden; display: flex; justify-content: flex-start; flex-direction: column; h3 { color: #666; font-size: 24px; font-weight: normal; height: 26px; padding-bottom: 16px; } .business_content { flex: 1; p { line-height: 28px; text-align: left; overflow: hidden; padding-top: 2px; } overflow: hidden; } } .more_tips { text-align: left; padding: 20px 30px 0px 30px; } } } .kong { width: 100%; height: 100%; z-index: 9999; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } } /* 存放裁剪base64图片的位置 */ .canvasimg { z-index: 9999999; position: absolute; top: 0; left: 0; right: 0; bottom: 276px; // position: fixed; // left: 100px; // bottom: 356px; width: 550px; height: 776px; margin: auto; pointer-events:auto; -webkit-touch-callout: default; } .canvasimg-web { width: 500px; height: 726px; } /* 保存图片的按钮 */ .footer { position: fixed; bottom: 0; left: 0; height: 256px; width: 100%; background-color: #efefef; color: #666; font-size: 24px; .top { height: 158px; position: relative; display: flex; justify-content: center; align-items: center; img { width: 34px; padding-right: 10px; } .f-kong { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } } .bottom { background-color: #fff; height: 98px; line-height: 98px; .cancel_btn { color: #333; font-size: 30px; } } } } ``` **js文件** ```js /* eslint-disable */ import lang from '../../i18n/sharePromotion'; import toast from '../toast'; import loading from '../../components/loading/index'; import html2canvas from 'html2canvas'; export default { name: 'saveImg', data() { return { lang: lang, img: '', imgurl: '', firstFlag: true, default_img: require('../../assets/img/sharePromotion/default_avatar.png'), canvas: null, imgName: 'poster' }; }, props: ['isShareCards', 'data', 'isApp', 'isWeixin'], watch: { data(newData) { this.data = newData; }, dataURL(newImg) { this.img = newImg; } }, created () { this.firstFlag = true }, mounted() { }, methods: { // 取消 cancelHandle() { this.$emit('update:isShareCards', false); this.img = ''; }, /* canvas裁剪 */ getCanvas(imgUrl) { loading.show(); const that = this; const canEle = this.$refs.canvasMain; // 获取存放截图的包裹的上一级dom对象（原生） const width = canEle.offsetWidth; // 获取dom宽 const height = canEle.offsetHeight; // 获取dom高 const canvas = document.createElement('canvas'); // 创建一个canvas节点 const scale = 2; // 定义任意放大倍数支持小数 const context = canvas.getContext('2d'); canvas.width = width * scale; // 定义canvas 宽度 * 缩放 canvas.height = height * scale; // 定义canvas高度 *缩放 context.scale(scale, scale); const rect = canEle.getBoundingClientRect(); //获取元素相对于视察的偏移量 context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位 const options = { useCORS: true, // 【重要】开启跨域配置 tainttest: true, // 检测每张图片都已经加载完成 scale: scale, // 添加的scale 参数 backgroundColor: null, // 避免下载不全 canvas, // 自定义 canvas width: width, // dom 原始宽度 height: height, }; const imgs = new Image(); imgs.onload = function () { html2canvas(canEle, options).then(canvas => { that.canvas = canvas; canvas.style.width = width+"px"; canvas.style.height = height+"px"; let dataURL = canvas.toDataURL("image/png"); that.img = dataURL; that.firstFlag = false const context = canvas.getContext('2d'); // 关闭抗锯齿保证生成的分享图是清晰的 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; loading.hide(); }); }; imgs.onerror = () => { // 安卓机canvas.toDataUrl的时候导出的base64图片没有base64前缀走了 imgs.onerror html2canvas(canEle, options).then(canvas => { canvas.style.width = width+"px"; canvas.style.height = height+"px"; let dataURL = canvas.toDataURL("image/png"); that.img = dataURL; that.firstFlag = false const context = canvas.getContext('2d'); // 关闭抗锯齿保证生成的分享图是清晰的 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; loading.hide(); }); } imgs.src = imgUrl; }, // 获取设备像素密度的方法 getPixelRatio(context){ var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }, }, }; ``` ### 组件在具体页面上的使用： ```js // vue ``` ```js // js import saveImg from '../../components/saveImg/saveImg.vue'; @Component({ components: { saveImg, } }); export default class Sharepromotion extends Vue { // 是否为本地app-web @getter('isApp') isApp: number; // 是否是微信环境 @state('appInfo', 'isWeixin') isWeixin: boolean; @state('shareOperatorInfo', 'data') data: any; lang = lang; isShareCards = false; // 是否保存图片弹窗 default_img = require('../../assets/img/sharePromotion/default_avatar.png'); shareCards() { this.isShareCards = true; // 显示保存图片 if (this.isShareCards ) { this.$nextTick(function() { const handle: any = this.$refs.child; handle.getCanvas((!this.data.avatar_img ? this.data.avatar_img : this.default_img)); }); } } } ``` ![03.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d052968a09b4fb9a3c605e70d353de0~tplv-k3u1fbpfcp-watermark.image) # 遇到的Bug及对策 ## 一、图片跨域无法加载问题 ![04.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e672c764bb134b029f351103f403dc0c~tplv-k3u1fbpfcp-watermark.image) ### 1、前端js设置：useCORS: true > **`这里有几个关键的地方：`** > > （1）allowTaint: true 和 useCORS: true 都是解决跨域问题的方式，不同的是使用allowTaint 会对canvas造成污染，就无法读取其数据，不能使用画布的toBolb()，toDataURL()或getImageData()方法，否则会出错，所以这里不能使用allowTaint: true > > （2）在跨域的图片里设置 crossOrigin="anonymous" 并且需要给imageUrl加上随机数 > > （3）canvas.toDataURL('image/jpg') 是将canvas转成base64图片格式。 ### 2、服务端设置CORS 解决跨域最常用的方法是跨域资源共享，我们将图片服务器的`response header`设置。图片若存放在阿里云之类的，则也需要处理【接口的返回的图片地址是允许跨域的+项目的域名（不同环境）允许跨域，那么各个环境看都是可以运行的。】 ![08.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/969072e2c38047698931586eab0a5928~tplv-k3u1fbpfcp-watermark.image) 开发过程中，前后端设置配置都OK，但是就是还是报错，那么一个关键点就是运行环境如何看的问题了。使用的图片不能在本地，因为图片可能还在本地服务器上，你的代码也还在本地；若放在服务器上了，是没有问题的。想要查看有无问题，则把浏览器的跨域给设置一下，然后跑本地代码，若没有问题则该问题也是OK的。 **`切记：图片url代码运行环境一定要保持一致！`** ## 二、下载最新依赖包报错当解决了图片跨域问题（1、接口返回的图片是允许跨域的---由服务器那边控制；2、域名的控制：允许域名跨域），还是报错: ![07.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff1cdaa8304b4eb48bb4534f08625714~tplv-k3u1fbpfcp-watermark.image) 一开始使用`html2canvas包的版本为1.0.0-rc.5`，减低至`html2canvas@0.5.0-beta3`的包，但是用npm 指定版本下载：`npm install html2canvas@0.5.0-beta3 `实际下载下来的却是`beta4`的版本；因此指定版本下载后还是有上述截图的问题；而后**使用vue引入js插件来进行使用**，竟然解决了。 ### 1、在vue+ts项目中如何引入原生js插件来进行使用在`config/index.js`进行配置 ![config.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/306e31eb2b4c4737ab847ac24eb29857~tplv-k3u1fbpfcp-watermark.image) **`此方式导致的问题：整个文件都打包到项目中，导致项目体积变大，须优化！`** ### 2、引入稳定的版本html2canvas 0.5.0-beta3，且解决了跨越问题；但如果截图区域有base64图片依然不成功。原因是node包里面对解析的base64后面加了时间戳导致src不能识别，所以修改了`config/templateInlineResources/html2canvas.js`包里面`1263行`代码为： ```js if (src.match(/data:image\/.*;base64,/i)) { self.image.src = src; } else { self.image.src = src +'?'+ new Date().getTime(); } ``` ![05.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f3a01fcda2b42019439f799c5df47f7~tplv-k3u1fbpfcp-watermark.image) **`此刻完美解决报错~`** ### 3、优化 npm进行下载包时，无法正确对应的下载0.5.0-beta3的版本，下载下来的是0.5.0-beta4的版本；直接引入html2canvas.js插件的方式，每个页面都会有这个插件在，导致项目体积过大； npm 形式下载的话，在需要的时候才会用，所以最后决定`降低到0.5.0-beta02`的版本尝试看看改包是否有用？最后`beta2可以用`，就出现了位偏移的问题；加上需要改动包里边的内容，因此采取把该包直接拉取，然后进行改动后，放入自己git里边进行引用。 #### 配置如下： - package.json的文件 ![config_package01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96e8123c92cf42aba3162f5c4af6d3f0~tplv-k3u1fbpfcp-watermark.image) - package-log.json的文件 ![cofing_package02.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b886e3868574b6e84a7460db31c4df5~tplv-k3u1fbpfcp-watermark.image) ## 三、在安卓手机上截屏清晰度问题 **`主要是scale的参数作用。`** ### 1、使用设备像素密度 ```js // 获取设备像素密度的方法 getPixelRatio（context）{ var backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStoreRatio; } ``` ![config_canvas01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd7c0fd873bc4df2b41184cd197bfc7f~tplv-k3u1fbpfcp-watermark.image) ### 2、放大比例倍数设置为固定值 ```js const scale = 2; // 定义任意放大倍数支持小数 ``` ![config_canvas02.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d71b5ddffa694cca8ba7cd5b2bf578bd~tplv-k3u1fbpfcp-watermark.image) ### 3、关闭抗锯齿保证生成的分享图是清晰的 ```js // 关闭抗锯齿保证生成的分享图是清晰的 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; ``` ![config_canvas04.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7d9361a52dd490cb1c80cbbe16669f4~tplv-k3u1fbpfcp-watermark.image) ## 四、出现位偏移的问题 ```js const context = canvas.getContext('2d'); var rect = canEle.getBoundingClientRect(); //获取元素相对于视察的偏移量 context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位 ``` ![config_canvas03.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8be00e47f4bb40f9b00b7a76a96296ae~tplv-k3u1fbpfcp-watermark.image)

{{lang.title}}

{{lang.businessScopeTitle}}