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版本，需要回正倒立的图片}
这个问题，导致熬夜加班了，前人种树，后人乘凉，记录在此，以便自己和道友们之后借鉴。