前段时间做了个跟裁剪相关的活动《用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中的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. h5图片上传简易版(FileReader+FormData+ajax)

    一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...

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

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

  5. Android调用相机实现拍照并裁剪图片,调用手机中的相冊图片并裁剪图片

    在 Android应用中,非常多时候我们须要实现上传图片,或者直接调用手机上的拍照功能拍照处理然后直接显示并上传功能,以下将讲述调用相机拍照处理图片然后显示和调用手机相冊中的图片处理然后显示的功能,要 ...

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

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

  7. uc浏览器手机版,页面图片不显示

    uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...

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

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

  9. Android大图片裁剪终极解决方案(上:原理分析)

    转载声明:Ryan的博客文章欢迎您的转载,但在转载的同时,请注明文章的来源出处,不胜感激! :-)  http://my.oschina.net/ryanhoo/blog/86842 约几个月前,我正 ...

随机推荐

  1. Lua __index元方法

    [Lua __index元方法] 当你通过键来访问 table 的时候,如果这个键没有值,那么Lua就会寻找该table的metatable(假定有metatable)中的__index 键.如果__ ...

  2. js中~~的用法

    ~~(Math.random()*(1<<24))).toString(16) ~~的作用相当于parseInt

  3. Echarts 合并版本

    1) Echarts x轴显示不全 解决办法:x轴加上如下代码. axisLabel:{ interval:0 } 2) tooltip文字没有左对齐 解决办法:tooltip加入如下代码. text ...

  4. machine learning----->学习成绩

    斯坦福大学机器学习公开课学习成绩:

  5. 把svn上的mycelipse导到本地的eclipse中

    myeclipse和eclipse的web项目互导时会产生各种问题,现在把我遇到的情况记录如下: eclipse如何把svn上down下来的myeclipseWeb项目变成eclipse的Web项目: ...

  6. php 下载图片 文件

    $file = dirname(dirname(__FILE__)) . $_GET['download']; //获取图片的绝对路径 header("Content-type: octet ...

  7. ascii文件转为utf-8格式

    import codecs import os #格式转换 fhanzi1 = codecs.open(os.path.join(outputpath,"hanzi1.txt"), ...

  8. python学习之——计算给出代码中注释、代码、空行的行数

    题目:计算给出代码中注释.代码.空行的行数 来源:网络 思路:注释行以 ‘#’开头,空行以 ‘\n’ 开头,以此作为判断 def count_linenum(fname): fobj = open(f ...

  9. libev 宏展开

    想看源码,宏太多,看着累,宏展开,再看,功力时间不够,先放下 放上宏展开后的代码. libev4.20 展开方示为 ./configure 修改makefile文件,字符串 替换CC为 CPP 注意要 ...

  10. RNN and LSTM saliency Predection Scene Label

    http://handong1587.github.io/deep_learning/2015/10/09/rnn-and-lstm.html  //RNN and LSTM http://hando ...