转载于:http://www.cnblogs.com/dailc/p/7843204.html

前言

前段时间遇到了一个移动端对图像进行裁剪、压缩、旋转的需求。
考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子。

关于图像裁剪、压缩

在HTML5时代,canvas的功能已经非常强大了,可以进行像素级的操作。像图像裁剪、压缩就都是基于canvas来实现的。

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

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

图像裁剪

功能包括:

  • canvas绘制图片

  • 裁剪框选择裁剪大小

  • 旋转功能

  • 放大镜(方便旋转)

  • 裁剪功能

  • 缩放、压缩功能(通过参数控制)

示例

https://dailc.github.io/image-process/examples/clip.html

效果





使用

引入

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();

更多

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

请参考源码

图像缩放

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

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

功能包括:

  • 图像的缩放、压缩

  • 一些常用的缩放算法(双立方,双线性,近邻)

示例

https://dailc.github.io/image-process/examples/scale.html

https://dailc.github.io/image-process/examples/scale_compress.html

效果

示例较为粗糙

使用

引入

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,
});

更多

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

请参考源码

完善与不足

虽然说一些注意的功能都已经实现,但是从细节角度考虑,还是有很多有待完善的地方的。

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

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

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

...

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

源码

图像裁剪:

https://github.com/dailc/image-process/blob/master/src/clip/README.md

图像缩放:

https://github.com/dailc/image-process/blob/master/src/scale/README.md

canvas图像裁剪、压缩、旋转的更多相关文章

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

    前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...

  2. HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

  3. 图书管理之HTML5压缩旋转裁剪图片总结

    整体思路  : 在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的 ...

  4. Android Bitmap 常见的几个操作:缩放,裁剪,旋转,偏移

    Android Bitmap 相关操作 常见的几个操作:缩放,裁剪,旋转,偏移      很多操作需要 Matrix 来支持:Matrix 通过矩阵来处理位图,计算出各个像素点的位置,从而把bitma ...

  5. STM32内存受限情况下摄像头驱动方式与图像裁剪的选择

    1.STM32图像接收接口 使用stm32芯片,128kB RAM,512kB Rom,资源有限,接摄像头采集图像,这种情况下,内存利用制约程序设计. STM32使用DCMI接口读取摄像头,协议如下. ...

  6. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  7. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  8. PHP图像裁剪为任意大小的图像,图像不变形,不留下空白

    <?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...

  9. 【HTML5】Canvas图像

    把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象.   显示一个canvas图像: <!DOCTYPE html> &l ...

随机推荐

  1. 【POJ3662】Telephone Lines dij + 二分答案

    题目大意:给定一个 N 个顶点,M 条边的无向图,求一条从 1 号节点到 N 号节点之间的路径,使得第 K+1 大的边权最小,若 1 与 N 不连通,输出 -1. 最小化最大值一类的问题,采用二分答案 ...

  2. 搭建一个简单的node.js服务器

    第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...

  3. git 子模块

    为了方便各个子模块独立开发,或使用第三方不断更新的仓库,可以使用子模块来引用. 子模块对应的源码是子模块仓库的克隆. git submodule 与 subtree对比 git submodule 允 ...

  4. centos7使用kubeadm配置高可用k8s集群

    CountingStars_ 关注 2018.08.12 09:06* 字数 464 阅读 88评论 0喜欢 0 简介 使用kubeadm配置多master节点,实现高可用. 安装 实验环境说明 实验 ...

  5. C# Winform 按回车键查找下一个可设置焦点的组件

    private void frmLogin_KeyPress(object sender, KeyPressEventArgs e) { //按回车键查找下一个可设置焦点的组件. if (e.KeyC ...

  6. C# 实现子窗体控制父窗体的方法

       我们来实现这样一个功能:当父窗体打开一个子窗体时隐藏父窗体的Panel,而当子窗体关闭时让Panel显示.实现的主要思路是创建一个子窗体的父类并在类中声明一个委托,当父窗体调用子窗体时绑定显示P ...

  7. pandas使用

    一.pd.cut()与pd.qcut()的区别 假设有一组人员数据,而你希望将它们划分为不同的年龄组 ages = [18,20,22,25,27,21,23,37,31,61,45,32] bins ...

  8. Spark进阶之路-Standalone模式搭建

    Spark进阶之路-Standalone模式搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spark的集群的准备环境 1>.master节点信息(s101) 2&g ...

  9. Scala进阶之路-尾递归优化

    Scala进阶之路-尾递归优化 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 递归调用有时候能被转换成循环,这样能节约栈空间.在函数式编程中,这是很重要的,我们通常会使用递归方法来 ...

  10. VBScript常用函数

    VBScript常用函数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1.Abs函数 Option Explicit '@author :yinzhengjie 'blog:ht ...