記一次營銷活動踩坑

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);
      });
  });
}
複製代碼