记一次营销活动踩坑

html2canvas

canvas没法调用toDataURL

详情描述

canvas设置了allowTaint
ps:
allowTaint:Whether to allow cross-origin images to taint the canvas

容许绘制跨域图片，可是不容许调用 canvas.toDataURL
复制代码

解决方案

若是须要获得 Base64 的话，不适合开启 allowTaint
1. 禁用 allowTaint
2. 解决跨域图片，参考一下个问题
复制代码

canvas没法加载跨域图片

详情描述

canvas 绘制的时候须要 load 跨域图片（好比cdn，或者其余域的图片）

解决方案

在img标签上面增长 crossorigin="anonymous" 
config 设置 useCORS: true
注意:base64的图片,不要添加 crossorigin="anonymous" 
复制代码

ios 上面偶发截图不全

详情描述

在 ios 上面，特别是 iphonex 容易出现偶发截图不全（某张图片丢失）
猜想是图片已经加载完毕，可是还未渲染完毕，就开始转base64，致使截图不全（ios特有。。。）
复制代码

解决方案

查看html2canvas 日志，发现有一个

有一个图片的Finished loading钩子

在这里作了一个sleep..
复制代码

图片丢失状态（不必定丢失下面你这种，还有多是背景）

正常截图

pad 宽屏适配

详情描述

在宽度大于540的机型上面，rem适配失败，定位不许
复制代码

解决方案

适配的方案是采用的 flexible.js + px2rem，经过观察flexible源码得知
复制代码

这一段代码限定住了html的元素fontSize，所以将if语句中的 540 改成 width 能够完成简单的适配
复制代码

微信/支付宝的sdk差别

须要注意的

1. Wechat能够长按识别base64的图片，可是其余webview不行
2. 微信不支持canvas跨域加载本地的base64图片，支付宝能够
3. 微信/支付宝sdk选择照片返回的是app内的图片地址，若是想得到图片上传，须要本身转base64，微信的转出Base64须要本身添加 data:image/jpeg;base64, 头部信息
复制代码

分离 Promise 的res，不在 Promise 的构造函数中 res/rej 一个 Promise 对象，封装一个得到file的举例

class myPormise {
  constructor() {
    this.init();
  }
  res(value) {
    this.$r(value);
  }
  init() {
    console.log("初始化promise");
    this.p = new Promise(res => {
      this.$r = res;
    });
  }
}
export class GetInputFile {
  constructor(type) {
    this.inputEle = document.createElement("input");
    this.inputEle.setAttribute("accept", "image/*");
    this.inputEle.setAttribute("type", "file");
    if (type == "camera") {
      //若是是camera则直接调用照相机
      this.inputEle.setAttribute("capture", "camera");
    }
    this.inputEle.addEventListener("change", this.uploadFile.bind(this));
    //document.append(this.inputEle);
    this.avatarFile = new myPormise();
    window.inputEle = this.inputEle;
    console.log("建立GetInputFile", this.inputEle);
  }
  click() {
    this.inputEle.click();
    return this;
  }
  uploadFile(e) {
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
      console.log("not image");
      return;
    }
    this.avatarFile.res(files[0]);
  }
  getfile() {
    return this.avatarFile.p;
  }
  destroyed() {
    for (let i in this) {
      if (i !== "destroyed") this[i] = null;
    }
  }
}

export function chooseImageH5(sourceType) {
  const getInputFile = new GetInputFile(sourceType[0]);
  return new Promise(res => {
    console.log("other选择图片");
    getInputFile
      .click()
      .getfile()
      .then(e => {
        res(e);
      });
  });
}
复制代码