一.需求
需求先定好，页面展示什么元素，和产品先核对好
1.端内答题 得到结果，结果页上面没有二维码和长按保存提示(因为端内不支持)。点击唤起分享平台分享出去是卡牌。 2.端外和端内一样的答题流程。答完题得到结果页，长按保存图片，保存图片有用户的昵称和头像。二·客户端卡牌分享注意点
let Y = window.pt === 'adr' ? 930 : 910; // ios和安卓对于轴的文字定位的偏差，ios符合设计稿尺寸Local.shareStyleImage( this.bgURL, //必填 放背景图片，分享的卡牌大小是由此背景图片决定。 [ // 定位在页面的图片数组，可以放置多个。[]必传; { url: this.qrURL, //图片地址 location: { x: 502, y: 850 }, // 定位的位置，参考绝对定位方法。 width: 135, // 图片宽度 height: 135 // 图片高度 } ], [ // 放定位文字的数组,[]必传，ios666/667的安装包必须 要把text的参数写上。安卓666/667可以不穿 { text: `长按扫码，做套题压压惊`, location: {x: 390, y: Y}, color: "ffffff", // 注意这里没有# fontSize: 25 } ] );复制代码 - 分享图片不能太大。不超过5m。尽量小，jpg的格式
- 卡牌的二维码 使用客户端的方法添加。不要放在整个大的背景图片上，因为有些安卓手机分享到QQ会压缩处理图片。- 保证清晰度 大小是135*135。
- 三个参数 没有也要写全。有些参数不需要用怎么处理？ 第一个参数不需要：用透明的png图片代替。（这种情况后面会说到）； 第二个参数图片的数组不需要：[] 第三个参数文字不需要：[]，ios填上text的参数
遗憾：
1.这种方法，填写的动态文字只支持修改颜色和字号，不能使用特殊字体。
2.结果分类过多，设计同学工作量增大。 3.使用同一组件，有动态信息，不能支持端外长按保存功能。解决
html2canvas.
思路：- 将写好的页面，包含特殊字体和动态信息的dom生成一张图片。将这个图片作为Local.shareStyleImage方法里面的图片。解决端内的特殊字体和设计同学工作量问题
- 将生成的图片替代原来的dom展示，解决端外可以长按保存的功能。并且能够保证保存的图片有动态信息。
代码
- 安装html2canvas，版本 "version": "1.0.0-alpha.12",引入。[低版本图片生成后会模糊]
- 基于html2canvas.js可将一个元素渲染为canvas，下列html2canvas方法会返回一个包含有canvas元素的promise.
html2canvas(document.querySelector('#capture')).then(canvas=>{ let context = canvas.getContext('2d'); context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; this.canvasPic = canvas.toDataURL(); // 得到base64图片});复制代码 html2canvas(document.querySelector('#capture'), {}).then(canvas => { let context = canvas.getContext('2d'); context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; this.canvasPic = canvas.toDataURL(); // 将base64转化成png/jpg图片的接口。原来的接口不支持png的，先接口已经完善。 const imageData = encodeURIComponent(canvas.toDataURL().split(',')[1]) const request = new XMLHttpRequest() request.open('POST', 'https://ptwapmusic3.reader.qq.com/activity/common/uploadPic'); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8') request.send(`imageData=${imageData}&actid=10171`) request.onload = _ => { const data = JSON.parse(request.response)z let imgObj = new Image(); // 创建图片对象 imgObj.src = data.url; imgObj.addEventListener('load', function () { console.log('fenxtu') }, false); this.canvasPicPng = data.url; } ); Local.shareStyleImage( this.bgURL, // !!!不可以不传 我用了一个透明的png的图片。这个图片的宽高就是你卡牌展示的宽高 [ { url: this.canvasPicPng, // 生成的图片 location: { x: 0, y: 0 }, width: 700, height: 1032 }, { url: this.qrURL, //二维码 location: { x: 450, y: 770 }, width: 135, height: 135 } ], [ { text: `长按扫码，做套题压压惊`, location: { x: 390, y: Y }, color: "ffffff", fontSize: 25 } ] );复制代码 - 动态图片渲染生成base64给后台后台返回不全。 a、添加useCORS:true属性； b、给要生成canvas的DOM中包含的每一个标签添加crossorigin="anonymous"属性； c、确保你的图片CDN服务器支持CORS访问，也就是会返回Access-Control-Allow-Origin等响应头；
html2canvas(document.querySelector('#capture'), {useCORS:true}).then(canvas => {}复制代码 - 端外的长按保存。 等html2canvas生成后，将原来的dom元素隐藏，并将图片添加到页面中。这种就可以长按保存图片了。
- 卡牌上传的图片不能写圆角。
-
后期优化问题。
因为图片生成然后传给后台再到后台返回给我们 需要一定的时间。如果在图片还没有返回来的时候 ，点击生成图片的按钮就会有问题。所以优化是在进入到结果页的时候，默认的结果页在后台图片还没有拿到的时候，先将图片透明，加一个用户提示，图片生成中。等图片完全返回后，再将页面的透明度去掉。这样就能保证用户点击生成图片按钮的时候 完全没有问题。 -
没有动态数据，不需要用html2canvas生成图片。需要注意的问题。