HTML5 Canvas drawImage ratio bug iOS

作者: Ansel Song

发布时间:2015-06-16 10:31:59

在IOS的情况下，当图片大于1.5Mb时，图像绘制在Canvas上时会出现拉伸效果，及压扁的效果；
所以需要先计算出其压缩比例，再进行相应的缩放

原文：

// 因为 iOS6 & iOS7 在canvas上绘制图片时，默认会垂直挤压图片，所以我们需要检测出图片的挤压比例 function detectVerticalSquash(image) { var ih = image.height; //创建画布 var cvs = document.createElement('canvas'); //设置宽度为1 cvs.width = 1; //设置高度为图片高度 cvs.height = ih; //获取描画对象 var ctx = cvs.getContext('2d'); //绘制图片 ctx.drawImage(image, 0, 0); //getImageData(int x,int y,int width,int height)：该方法获取canvas上从(x,y)点开始，宽为width、高为height的图片区域的数据， //该方法返回的是一个CanvasPixelArray对象，该对象具有width、height、data等属性。 //data属性为一个数组，该数组每4个元素对应一个像素点。 var data = ctx.getImageData(0, 0, 1, ih).data; // 有图像的像素点位置 检测图像边缘的情况下，此时它被垂直挤压像素的位置 var sy = 0; //透明的像素点位置 var ey = ih; //当前检索的像素点位置 var py = ih; while (py > sy) { // data属性为一个数组，该数组每4个元素对应一个像素点。py - 1：最后一个像素点； //3：根据RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间，得出Alpha在第四个位置（索引是3） var alpha = data[(py - 1) * 4 + 3]; //透明 if (alpha === 0) { ey = py; } else { sy = py; } // num >> 1 右移一位相当于除2，右移n位相当于除以2的n次方 //如果检测到了像素则扩大检索范围，如果没有检索到像素则会缩小范围，每次浮动值为检索到像素的点加没有检索到像素点的一半 py = (ey + sy) >> 1; } //求出垂直压缩的比例 var ratio = (py / ih); return (ratio === 0) ? 1 : ratio; }

　　

/** * A replacement for context.drawImage * (args are for source and destination). */ function drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) { var vertSquashRatio = detectVerticalSquash(img); // Works only if whole image is displayed: // ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio); // The following works correct also when only a part of the image is displayed: ctx.drawImage(img, sx * vertSquashRatio, sy * vertSquashRatio, sw * vertSquashRatio, sh * vertSquashRatio, dx, dy, dw, dh ); }

来源:

推荐: