-卡牌+动态信息长按保存图片注意点~-CSDN博客

一.需求

需求先定好，页面展示什么元素，和产品先核对好
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图片
});
复制代码

注：现在这个图片就是一张完整的图片。二维码不要生成。如果要把2维码放在页面生成的话 2维码大小写成184 184 / 150150 [需要和设计商量]

3. 调用客户端Local.shareStyleImage方法分享。
发现遇到问题：
a.base64图片太大客户端不能分享。->转化图片格式
b.把生成的图片当做背景图片作为第一个参数放入会有尺寸问题。->将它作为第二个参数填入，可以定义宽高
c.默认的背景图片大小就是你分享卡牌的大小。一定要传同样尺寸的背景图片
**d.如果卡牌高度超过了1334，那么会将图片等比缩小，造成卡牌有黑边的情况。【和设计商量】接口返给我们的图片大小

    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生成图片。需要注意的问题。

这个背景图的颜色有点过渡。在长屏手机上有适配有问题。 -> 透明的png图片

使用透明的png图片，端外保存问题。 -> 展示用png 保存用jpg.