IOS
会出现图片的宽高与图片的方向不匹配的问题,因此需要进行特殊处理,矫正图片的方向。方案:
1、可以使用 exif.js
来获取图片信息中的Orientation
属性,利用canvas
的旋转绘制来矫正;
2、这里有个 canvasResize.js
插件,可以解决从 File
到 base64
的所有问题。
二、图片的裁剪
在实际项目中,由于图片的宽高比例各式各样,而展示和使用一般需要一个较为固定的比例,此时便需要将图片裁剪成我们需要的宽高比例,使用到的方式其实和图片的缩放基本一致,主要是通过调整 drawImage
的dx, dy
参数来实现。原理其实是,将drawImage
的绘制起始点(dx, dy)
向上偏移,此时由于canvas
已被我们设置成期望裁剪后的尺寸,而超出画布的部分不会绘制,从而达到裁剪的目的;通过灵活的设置值,基本可以完成各种图片裁剪需求,简单示例图(黑色框代表创建的画布的尺寸):
此处以需要将一张600*800
的长方形图竖直居中裁剪为600*600
的正方形图为例, 简单封装成一个功能函数:
// 使用方式: let b64 = cropImage(img, { width : 600, height : 600, }); // 居中裁剪 function cropImage(img, ops){ // 图片原始尺寸; let imgOriginWidth = img.naturalWidth, imgOriginHeight = img.naturalHeight; // 图片长宽比,保证图片不变形; let imgRatio = imgOriginWidth / imgOriginHeight; // 图片裁剪后的宽高, 默认值为原图宽高; let imgCropedWidth = ops.width || imgOriginWidth, imgCropedHeight = ops.height || imgOriginHeight; // 计算得出起始坐标点的偏移量, 由于是居中裁剪,因此等于 前后差值 / 2; let dx = (imgCropedWidth - imgOriginWidth) / 2, dy = (imgCropedHeight - imgOriginHeight) / 2; // 创建画布,并将画布设置为裁剪后的宽高; let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); cvs.width = imgCropedWidth; cvs.height = imgCropedHeight; // 绘制并导出图片; ctx.drawImage(img, dx, dy, imgCropedWidth, imgCropedWidth / imgRatio); return cvs.toDataURL('image/jpeg', 0.9); }
三、图片的旋转
图片的旋转的原理同样也是将图片绘制到画布上进行旋转后再导出。其实使用到的是canvas
的rotate
方法;
let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); // 将参照点移动到画板的中心点; ctx.translate(ctx.width/2, ctx.height/2); // 旋转画板; ctx.rotate = 90; // 绘制图片; ctx.drawImage(img); // 导出得到旋转后的图片; cvs.toDataURL();
内容版权声明:除非注明,否则皆为本站原创文章。