【开源】canvas图像裁剪、压缩、旋转

时间 2019-11-16

标签开源 canvas 图像裁剪压缩旋转繁體版

原文原文链接

前言

前段时间遇到了一个移动端对图像进行裁剪、压缩、旋转的需求。
考虑到已有各轮子的契合度都不高，因而本身从新造了一个轮子。css

关于图像裁剪、压缩

在HTML5时代，canvas的功能已经很是强大了，能够进行像素级的操做。像图像裁剪、压缩就都是基于canvas来实现的。html

关于其中原理，无非就是利用canvas自带的API，复杂一点的就是裁剪框以及旋转后的坐标计算，所以再也不赘述。ios

本文中的图像裁剪、压缩都是基于canvas完成的。git

图像裁剪

功能包括：github

canvas绘制图片算法
裁剪框选择裁剪大小canvas
旋转功能iphone
放大镜（方便旋转）优化
裁剪功能spa
缩放、压缩功能（经过参数控制）

示例

dailc.github.io/image-proce…

效果

[图片上传失败...(image-c687d7-1510800462845)]

使用

引入

dist/image-clip.css
dist/image-clip.js复制代码

全局变量

ImageClip复制代码

调用方法

var cropImage = new ImageClip(options);

cropImage.method()复制代码

API

resetClipRect

重置裁剪框，从新变为最大

cropImage.resetClipRect();复制代码

clip

裁剪图像，根据当前的裁剪框进行裁剪

cropImage.clip();复制代码

getClipImgData

获取已裁剪的图像

var base64 = cropImage.getClipImgData();复制代码

rotate

旋转图片

cropImage.clip(isClockWise);复制代码

destroy

销毁当前的裁剪对象

若是一个容器须要从新生成裁剪对象，必定要先销毁之前的

cropImage.destroy();复制代码

关于详细参数说明与更多使用

请参考源码

图像缩放

上述的图片裁剪中其实已经附带缩放功能，可是鉴于那是基于整套裁剪流程的，不知足一些场景（譬如只要针对图片压缩的）。

所以，单独又将图像缩放提取成一个模块，以适用于此类场景。

功能包括：

图像的缩放、压缩
一些经常使用的缩放算法（双立方，双线性，近邻）

示例

dailc.github.io/image-proce…

效果

示例较为粗糙

使用

引入

dist/image-scale.js复制代码

全局变量

ImageScale复制代码

调用方法

ImageScale.method()复制代码

API

scaleImageData

对ImageData类型的数据进行缩放，将数据放入新的ImageData中

ImageScale.scaleImageData(imageData, newImageData, {
    // 0: nearestNeighbor
    // 1: bilinearInterpolation
    // 2: bicubicInterpolation
    // 3: bicubicInterpolation2
    processType: 0,
});复制代码

scaleImage

对Image类型的对象进行缩放，返回一个base64字符串

var base64 = ImageScale.scaleImage(image, {
    width: 80,
    height: 80,
    mime: 'image/png',
    // 0: nearestNeighbor
    // 1: bilinearInterpolation
    // 2: bicubicInterpolation
    // 3: bicubicInterpolation2
    processType: 0,
});复制代码

compressImage

compressImage，返回一个base64字符串

与scale的区别是这用的是canvas自动缩放，而且有不少参数可控

var base64 = ImageScale.compressImage(image, {
    // 压缩质量
    quality: 0.92,
    mime: 'image/jpeg',
    // 压缩时的放大系数，默认为1，若是增大，表明图像的尺寸会变大(最大不会超过原图)
    compressScaleRatio: 1,
    // ios的iPhone下主动放大必定系数以解决分辨率太小的模糊问题
    iphoneFixedRatio: 2,
    // 是否采用原图像素（不会改变大小）
    isUseOriginSize: false,
    // 增长最大宽度，增长后最大不会超过这个宽度
    maxWidth: 0,
    // 使用强制的宽度，若是使用，其它宽高比系数都会失效，默认整图使用这个宽度
    forceWidth: 0,
    // 同上，可是通常不建议设置，由于极可能会改变宽高比致使拉升，特殊场景下使用
    forceHeight: 0,
});复制代码

关于详细参数说明与更多使用

请参考源码

完善与不足

虽说一些注意的功能都已经实现，可是从细节角度考虑，仍是有不少有待完善的地方的。

譬如，裁剪框的实现方式不优雅。

譬如，旋转不支持其它角度。

譬如，内部源码有待优化。

...

虽说有计划将来某段时间重构，但考虑到实际的时间安排，可能得等到很后了。

源码

图像裁剪：

github.com/dailc/image…

图像缩放：

github.com/dailc/image…