前言

图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕。

需求就是那么简单,在浏览器里裁剪图片并上传到服务器。

我第一个想到的方法就是,将图片和裁剪参数(x,y,scale,rotate)一并上传给服务器,服务器来做图片处理,so easy。
但是,这并不符合潮流发展的方向:能在前端做的处理,就放前端做吧。
与潮流妥协的结果就是,前端越来越复杂。

一开始我并不认为浏览器能够读取并生成图片。想想看啊,要做"点击复制"的这样简单的功能,都需要借助 Flash 的浏览器,权限哪有那么大。

参阅各类网站,只要把图片放在本地处理的,基本上都借用了Flash。随便抄一个吧,没有API,就算能修改图片,上传路径都不知道怎么改。更关键的是,我对Flash一窍不通。

好在我们的网站已经完全抛弃了IE9以下的浏览器,只兼容现代HTML5浏览器。(连Opera和微软都开始走Webkit内核的路线了,潮流就是跟着Chrome走)只能寄希望与HTML5,于是钻研了一番,发现如下流程可行。

以下将对每个环节详解。

获取原图片 File 对象

每个图片文件处理的开始,都是由onchange事件开始

<script>
function handler(e){
var originPhoto = e.target.files[0]; // IE10+ 单文件上传取第一个
window.originFileType = originPhoto.type; //暂存图片类型
window.originFileName = originPhoto.name; //暂存图片名称
...
}
</script> <input type="file" name="demo" onchange='handler(event)' accept="image/*" >
<img id="preview">
<button onclick="cropAndUpload()">确定并上传</button>

初始化Cropper

在这里介绍一个非常好用的库 cropper.js 
https://github.com/fengyuanchen/cropper
生成遮罩、获取裁剪参数、输出canvas ... 而且绝对轻量级,压缩后的css和js代码只有30KB。他是基于JQuery的,引入JQuery可能还要再大点。不过现在哪个网站没有在用JQuery呢?
兼容IE9+,移动端体验良好,能够响应触摸缩放,拖动。以下是安卓4.4 原生浏览器中的预览图

function handler(event){
...
var URL = window.URL || window.webkitURL , originPhotoURL;
originPhotoURL = URL.createObjectURL(originPhoto); //Base64
$('#preview').cropper({
aspectRatio: 1 / 1, // 固定裁剪比例1:1,裁剪后的图片为正方形
}).cropper('replace', originPhotoURL); // 动态设置图片预览
}

绘制Canvas

cropper.js 提供了生成Canvas的方法getCroppedCanvas,可以指定生成画布的大小。
或者根据getData获取裁剪信息(包括旋转和缩放)用ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)进行手动绘制。后者自由性高一点,但是既然有现成的方法,那么就直接用好了。

function cropAndUpload(){
// 此处注意,生成的Canvas长宽比应与之前规定的裁剪比例一致
// 否则生成的图片会有失真
var size = {
width:100,
height:100
}
var croppedCanvas = $('#preview').cropper("getCroppedCanvas",size); // 生成 canvas 对象
var croppedCanvasUrl = croppedCanvas.toDataURL(originFileType); // Base64
...
}

应当注意的是widthheight的值并不推荐设置成固定值。裁剪框的大小可能是会超过100*100(比如500*500)的,而实际生成的图片却是100*100,这样的后果就是直接将一个500*500的高清图片,压缩成了100*100的失真图片。同样的,裁剪框小于100*100,生成的图片就会模糊。

Base64 转Blob对象

字符串转为二进制?(前端本来是个做页面的,现在也开始操作文件了。自从有了HTML5,就可以把浏览器当作一个操作系统了)官方并没有出DataURLtoBlob的方法,所以只能自己写一个,转化也挺简单:拆解文件类型,将字符数据转成16进制数据存数组,并用数据初始化一个Blob对象。

function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
} function cropAndUpload(){
...
var croppedBlob = dataURLtoBlob(croppedCanvasUrl);
croppedBlob.name = originFileName; // Blob对象没有name
// Upload(croppedBlob);
}

现在就可以像处理FileObject一样处理 这个blob对象了。

其实在最新的HTML5标准中是支持HTMLCanvasElement.toBlob(callback, mimeType, quality) 

croppedCanvas.toBlob(function(croppedBlob){
// Upload(croppedBlob);
},originFileType)

原文作者来自 MaxLeap 团队_UX成员:John王

原文链接: https://blog.maxleap.cn/archives/705

使用HTML5的canvas做图片剪裁的更多相关文章

  1. Jcrop 做图片剪裁 在IE中无法显示问题解决办法

    我遇到的Jcrop做剪裁无法显示的问题 是在IE8下发生的(在 firfox he chrome 中是显示正常的) 解决办法 是在一个图片加载完成后在 初始化 Jcrop:1.预加载图片的方法 var ...

  2. 用HTML5的canvas做一个时钟

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...

  3. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  4. Html5 Canvas 实现图片合成

    多个图片合成一张 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. 使用FormData数据做图片上传: new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  6. 使用HTML5 canvas做地图(1)基础知识

    之前一直想使用HTML5技术全新做一套地图API,可是苦于时间和精力,迟迟未有行动.后来下定决心,利用下班和周末做出一个大体框架出来,现在和网友分享一下自己的整体的一个思路和想法.欢迎大家提出宝贵建议 ...

  7. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  8. Canvas实现图片放大缩小移动操作

    对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...

  9. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

随机推荐

  1. 动态添加删除网卡 - 每天5分钟玩转 OpenStack(156)

    这是 OpenStack 实施经验分享系列的第 6 篇. 在项目实施过程中,经常会有添加删除网卡的需求.比如一个运行数据库的 instance,初始只有一个网卡,数据库服务和备份共用这块网卡,后来为提 ...

  2. TempDB问题定位与解决

    步骤1.TempDB压力诊断 等待类型诊断 TempDB的争用压力在等待篇中已经简单介绍,等待的表现为 pagelatch_类等待,等待的资源是 “2: X :X ” tempDB所在磁盘的响应时间 ...

  3. Winfrom 程序打包及安装

    前言 近期被公司外派到驻空调厂的项目组,支援一个TCP相关的程序对接.主要是做智能门禁系统,然后主要是统计出实时的进出人数. 我这边能作为服务端,门禁设备作为客户端,整个流程并不算复杂,根据协议来写, ...

  4. BOM元素之location对象

    location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能,它既是window对象的属性,也是document对象的属性:换句话说,window.location和documen ...

  5. 如何通过Visual Studio来管理我们的数据库项目

    某日的一个早晨,产品早上来告诉我说要把之前变更的一个功能更改回原来的设计内容,作为程序员大家都最讨厌需求来回反复变更,但是没有办法,苦逼的程序员最终还是继续要改,毕竟是给老板打工的,但是发现我们之前的 ...

  6. Linux 内存优化

    1.清理前内存使用情况 free -m2.开始清理   echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: ...

  7. FineUIMvc随笔 - 不能忘却的回发(__doPostBack)

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户反馈 有网友在官方论坛抛出了这么一个问题,似乎对 FineUIMvc 中的浏览器端与服务器端的交互方式很有异议. 这里面的关 ...

  8. hdoj 1231 最大连续子列和

    最大连续子序列 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  9. 关于Dapper.NET的相关论述

    年少时,为何不为自己的梦想去拼搏一次呢?纵使头破血流,也不悔有那年少轻狂.感慨很多,最近事情也很多,博客也很少更新了,毕竟每个人都需要为自己的生活去努力. 最近在一个群里遇到一个人说的话,在这里不再赘 ...

  10. 2017-02-23 switch case 循环语句

    另一个分支语句:switch..case.. switch(变量){    case 值:代码段;break;    case 值:代码段;break;    ...    default:代码段;b ...