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

时间 2019-12-05

标签动态信息保存图片注意繁體版

原文原文链接

一.需求

需求先定好，页面展现什么元素，和产品先核对好
1.端内答题获得结果，结果页上面没有二维码和长按保存提示(由于端内不支持)。点击唤起分享平台分享出去是卡牌。
2.端外和端内同样的答题流程。答完题获得结果页，长按保存图片，保存图片有用户的昵称和头像。
html

二·客户端卡牌分享注意点

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.使用同一组件，有动态信息，不能支持端外长按保存功能。ios

解决

html2canvas. 官网连接
思路：
git

将写好的页面，包含特殊字体和动态信息的dom生成一张图片。将这个图片做为Local.shareStyleImage方法里面的图片。解决端内的特殊字体和设计同窗工做量问题
将生成的图片替代原来的dom展现，解决端外能够长按保存的功能。而且可以保证保存的图片有动态信息。

代码github

安装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元素隐藏，并将图片添加到页面中。这种就能够长按保存图片了。
卡牌上传的图片不能写圆角。

解决： 传两个图片一个头像一个容器，将透明的容器盖在头像上。

后期优化问题。
由于图片生成而后传给后台再到后台返回给咱们须要必定的时间。若是在图片尚未返回来的时候，点击生成图片的按钮就会有问题。因此优化是在进入到结果页的时候，默认的结果页在后台图片尚未拿到的时候，先将图片透明，加一个用户提示，图片生成中。等图片彻底返回后，再将页面的透明度去掉。这样就能保证用户点击生成图片按钮的时候彻底没有问题。web
没有动态数据，不须要用html2canvas生成图片。须要注意的问题。canvas

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

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