Qrcode 微信公众号 生成分享海报

备忘

1. qrcode.min.js 生成二维码 在android 不可用
   需要替换js里面的正则: /android ([0-9]+\.?[0-9]?)/i

2. url太长生成二维码 太密集, 扫描识别度低, 缩小图片情况下,几乎无法识别
   使用短链接,在生成二维码

3. canvas 绘制间距文字, 省略号...

 // 主要测量字体 宽度
  var getTextWidthWithLetterPadding = function (ctx,text,padding){
      let width = 0;
      text.split('').forEach(function (v) {
          let letterWidth = ctx.measureText(v).width + padding;
          width += letterWidth;
      });
      return width;
  }
// 文字居中, 逐字绘制
  var lineStartX = (w- getTextWidthWithLetterPadding(context,lin1Arr.join(''),letterSpacing))/2;
      lin1Arr.forEach(function (v) {
          var letterWidth = context.measureText(v).width;
          lineStartX = lineStartX + letterWidth + letterSpacing;
          context.fillText(v,lineStartX , y);
      });

4. 中英文分词 使用正则 var engList = text.match(/\w+/g);

   // 保持 英文单词的完整性  换行绘制 记录index
   // 防止出现第一行超长 , 需要再次判断

5. 微信长按保存图片, 就是用base64的图片资源即可

    var saveAsPNG =  function(oCanvas, bReturnImg, iWidth, iHeight) {
        if (!bHasDataURL) return false;
        var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight),
            strMime = "image/png",
            strData = oScaledCanvas.toDataURL(strMime);

        if (bReturnImg) {
            return makeImageObject(strData);
        } else {
            saveFile(bReplaceDownloadMime ? strData.replace(strMime, strDownloadMime) : strData);
        }
        return true;
    }
    var saveFile = function(strData) {
        if (!window.open(strData)) {
            document.location.href = strData;
        }
    }
    var makeImageObject = function(strSource) {
        var oImgElement = document.createElement("img");
        oImgElement.src = strSource;
        return oImgElement;
    }
    var scaleCanvas = function(oCanvas, iWidth, iHeight) {
        if (iWidth && iHeight) {
            var oSaveCanvas = document.createElement("canvas");

            oSaveCanvas.width = iWidth;
            oSaveCanvas.height = iHeight;
            oSaveCanvas.style.width = iWidth+"px";
            oSaveCanvas.style.height = iHeight+"px";

            var oSaveCtx = oSaveCanvas.getContext("2d");

            oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iWidth);

            return oSaveCanvas;
        }
        return oCanvas;
    }

6. canvas imageload无法加载cdn图片, 好像设置跨域可以 试了一下好像ios不行,android可以 就没弄了
   直接使用本地 static资源图片就可以了