vlambda博客
学习文章列表

Safari H5 canvas导出图片倒立问题

当我们在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//sourceData 反转前的像素//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版本,需要回正倒立的图片}

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