美文网首页
Safari H5 canvas导出图片倒立问题

Safari H5 canvas导出图片倒立问题

作者: GuitarHusky | 来源:发表于2021-11-19 18:11 被阅读0次

当我们在canvas中绘制一些图形或者设计海报的时候,使用canvas的API - toDataURL可以将当前canvas画布导出一张base64格式的快照。用来提供展示和保存。
但是在低版本iOS系统中(15.0以下)移动端Safari浏览器中,toDataURL导出的快照是倒立的。我们可以使用像素偏移方法将倒立的图片转正回复。

function rotateBase64(data) {
    //传入需要旋转的base64图片
    return new Promise((resolve, reject) => {
      const imgView = new Image();
      imgView.src = data;
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      imgView.onload = () => {
        const imgW = imgView.width;
        const imgH = imgView.height;
        canvas.width = imgW;
        canvas.height = imgH;
        context.drawImage(imgView, 0, 0);
        var imgData = context.getImageData(0, 0, imgW, imgH);
        var newImgData = context.getImageData(0, 0, imgW, imgH);
        context.putImageData(imageDataVRevert(imgData, newImgData), 0, 0);
        resolve(canvas.toDataURL("image/png"));
      };
    });
  }
  /**
   * 纵向镜像翻转 canvas
   * @param sourceData 反转前的像素
   * @param newData 通过目标边框创建的空像素块
   **/
  function imageDataVRevert(sourceData, newData) {
    for (var i = 0, h = sourceData.height; i < h; i++) {
      for (var j = 0, w = sourceData.width; j < w; j++) {
        newData.data[i * w * 4 + j * 4 + 0] =
          sourceData.data[(h - i) * w * 4 + j * 4 + 0];
        newData.data[i * w * 4 + j * 4 + 1] =
          sourceData.data[(h - i) * w * 4 + j * 4 + 1];
        newData.data[i * w * 4 + j * 4 + 2] =
          sourceData.data[(h - i) * w * 4 + j * 4 + 2];
        newData.data[i * w * 4 + j * 4 + 3] =
          sourceData.data[(h - i) * w * 4 + j * 4 + 3];
      }
    }
    return newData;
  }

需要兼容iOS系统,因为在iOS15.0版本以上,官方Safari已经修复了这个问题,所以需要版本判断

  //获取浏览器当前版本信息等
  function getBrowserInfo() {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
    var m = ua.match(re);
    Sys.browser = m[1].replace(/version/, "'safari");
    Sys.ver = m[2];
    return Sys;
  }
if(Number(browserInfo.ver.split('.')[0]) >= 15){
    ...//高于iOS15.0版本,ios系统已修复,正常导出图片即可
    context.toDataURL();
}else{
    ... //低于iOS15.0版本,需要回正倒立的图片
}

这个问题,导致熬夜加班了,前人种树,后人乘凉,记录在此,以便自己和道友们之后借鉴。

相关文章

网友评论

      本文标题:Safari H5 canvas导出图片倒立问题

      本文链接:https://www.haomeiwen.com/subject/evletrtx.html