前段时间做了个跟裁剪相关的活动《用H5中的Canvas等技术制作海报》,这次公司要做个与奥运相关的活动,扫车牌赢奖。

于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更通用。下图是活动中裁剪的页面:

先来看看两个活动的不同:

1、原先的活动每次旋转只能90°,而此次活动可以任意角度旋转。

2、原先的活动每次旋转就会生成一段Base64数据,导致页面卡顿严重,而此次只有在裁剪的时候才生成图片。

以上两点是最大的不同,其它方面基本一致,如果碰到不明白的可以参考一下《海报制作

Github的插件项目中,index.html页面是一个示例demo。

一、裁剪原理

1)计算坐标

在上一篇海报制作的文章中,提到了裁剪时候各个位置的计算。这次使用的计算方式与上次一样。

最终也是在分别获取裁剪框与图片的x、y和宽高。

只是此次是任意角度的旋转,所以在裁剪的时候要使用更通用的计算方式。

2)生成旋转图片

我在最终裁剪的时候,会先生成一张旋转后的图片,然后再在这张图片中裁剪指定区域。

在上图中选中的透明蓝色部分就是一张旋转后的图片,这里只能看到部分,其实完整的应该是会比原图的宽大很多。

而通过计算后的裁剪框与图片的位置如下:

image的x和y坐标大概就是上图中红点的位置,如果要裁剪就要生成这张旋转后的图片。

细的蓝色线条描绘了旋转后的图片样子,这里只展示到了部分。接下来就是如何计算得到这张图片。

二、三角函数

要生成上面那张旋转图片,需要通过三角函数计算出宽高,以及在Canvas上画图的时候需要偏移的值。

通过手工计算,得出旋转分为四种情况90°以内、180°以内、270°以内和360°以内。

上图是我手工计算的90°以内的情况,可以计算出x1、x2、y1、y2,旋转角度是30°。

知道了这四个值就能计算出新图的宽和高,还能得出需要平移的坐标值,像上图就是(x2,0)。

插件中函数“radian”,“sin”,“cos”,“caculate1”,“caculate2”,“rotateCanvas”都是在做三角函数相关计算。

其他三个情况以此类推。

    

最终图片生成是在方法“filterImage”中做的,下面是部分代码。

顺便说下,最后canvas生成了jpeg图片,并且质量是0.5,这是为了减小图片的大小,使得在性能差的手机上面也能做操作。

三、旋转

当在操作图片的时候,我通过手势库touch.js绑定的事件,获取到了角度,然后再将这个角度设置到CSS属性“rotate”中,使得图片旋转了起来。

平移和缩放分别用到了“translate3d”和“scale3d”,用3d属性是为了增强性能。

在插件的“initTouch”方法中配置了手势事件。插件的私有属性“param”缓存了平移、缩放和角度的值。

veCropProtytype.initTouch = function() {
var currScale, _this = this,
Touch = this.opts.Touch,
frame = this.opts.frame; Touch.on(frame, 'rotate', function (ev) {
var totalAngle = _this.param.deg + ev.rotation;
if(ev.fingerStatus === 'end'){
_this.param.deg = _this.param.deg + ev.rotation;
}
_this.formatTransform(_this.param.offsetX, _this.param.offsetY, _this.param.scale, totalAngle);
});
//......
};

Github上的地址:

https://github.com/pwstrick/veCrop

H5图片裁剪升级版的更多相关文章

  1. H5图片裁剪升级版(手机版)

    前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...

  2. 移动端 H5图片裁剪插件,内置简单手势操作

    前面曾经写过一篇<H5图片裁剪升级版>,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中. 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计 ...

  3. 从web图片裁剪出发:了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  4. H5移动端图片裁剪(base64)

    在移动端开发的过程中,或许会遇到对图片裁剪的问题.当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉. 图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都 ...

  5. web开发实战--图片裁剪和上传

    前言: 最近的开发中, 有一个上传头像的任务. 由于头像本身的特殊性, 其一般流程为选择图片, 编辑裁剪区域, 再继而上传图片操作. 看似简单的东西, 实则是挺麻烦的一件事. 借助这次开发机会, 来具 ...

  6. 图片裁剪 cropper.js 上传组件封装 vue

    //HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...

  7. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  8. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  9. 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

随机推荐

  1. win10 环境 gitbash 显示中文乱码问题处理

    gitbash 是 windows 环境下非常好用的命令行终端,可以模拟一下linux下的命令如ls / mkdir 等等,如果使用过程中遇到中文显示不完整或乱码的情况,多半是因为编码问题导致的,修改 ...

  2. NodeJs之log4js

    log4js log4js是一个管理,记录日志的工具. 其实与morgan的作用类似. 安装 npm install -g log4js log4js的6个日志级别 分别是:trace(蓝色).deb ...

  3. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  4. Convert BSpline Curve to Arc Spline in OpenCASCADE

    Convert BSpline Curve to Arc Spline in OpenCASCADE eryar@163.com Abstract. The paper based on OpenCA ...

  5. php实现的分页类

    php分页类文件: <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 pr ...

  6. 深入理解javascript的getTime方法

    1.理解getTime getTime() 方法返回一个时间的格林威治时间数值. 可以使用这个方法把一个日期时间赋值给另一个Date 对象. 语法: dateObj.getTime() 参数: 无. ...

  7. 调用微信退款接口或发红包接口时出现System.Security.Cryptography.CryptographicException: 出现了内部错误 解决办法

    我总结了一下出现证书无法加载的原因有以下三个 1.证书密码不正确,微信证书密码就是商户号 解决办法:请检查证书密码是不是和商户号一致 2.IIS设置错误,未加载用户配置文件 解决办法:找到网站使用的应 ...

  8. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  9. Android Retrofit 2.0 使用-补充篇

    推荐阅读,猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava 4.RxBus 5.Android MVP+Retrofit+RxJava实践小 ...

  10. 如何理解MySQL中auto_increment?

    1.auto_increment用于主键自动增长.比如从1开始增长,当把第一条数据删除,再插入第二条数据时,主键值为2,不是1.