未加星标

怎样实现前端裁剪上传图片功能

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

由于前端是不能直接操作本地文件的,要么通过 <input type="file"> 用户点击选择文件或者拖拽的方式,要么使用flash等第三方的控件,但flash日渐衰落,所以使用flash还是不提倡的。同时html5崛起,提供了很多的api操控,可以在前端使用原生的api实现图片的处理,这样可以减少后端服务器的压力,同时对用户也是友好的。

最后的效果如下:


怎样实现前端裁剪上传图片功能

这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现:

1. 拖拽显示图片

拖拽读取的功能主要是要兼听html5的drag事件,这个没什么好说的,查查api就知道怎么做了,主要在于怎么读取用户拖过来的图片并把它转成base64以在本地显示。

var handler = { init: function($container){ //需要把dragover的默认行为禁掉,不然会跳页 $container.on("dragover", function(event){ event.preventDefault(); }); $container.on("drop", function(event){ event.preventDefault(); //这里获取拖过来的图片文件,为一个File对象 var file = event.originalEvent.dataTransfer.files[0]; handler.handleDrop($(this), file); }); } }

代码第10行获取图片文件,然后传给11行处理。

如果使用 input ,则监听input的change事件:

$container.on("change", "input[type=file]", function(event){ if(!this.value) return; var file = this.files[0]; handler.handleDrop($(this).closest(".container"), file); this.value = ""; });

代码第3行,获取File对象,同样传给handleDrop进行处理

接下来在handleDrop函数里,读取file的内容,并把它转成base64的格式:

handleDrop: function($container, file){ var $img =$container.find("img"); handler.readImgFile(file, $img, $container); },

我的代码里面又调了个readImgFile的函数,helper的函数比较多,主要是为了拆解大模块和复用小模块。

在readImgFile里面读取图片文件内容:

readImgFile: function(file, $img, $container){ var reader = new FileReader(file); //检验用户是否选则是图片文件 if(file.type.split("/")[0] !== "image"){ util.toast("You should choose an image file"); return; } reader.onload = function(event) { var base64 = event.target.result; handler.compressAndUpload($img, base64, file,$container); } reader.readAsDataURL(file); }

这里是通过 FileReader 读取文件内容,调的是 readAsDataURL ,这个api能够把二进制图片内容转成base64的格式,读取完之后会触发onload事件,在onload里面进行显示和上传:

//获取图片base64内容 var base64 = event.target.result; //如果图片大于1MB,将body置半透明 if(file.size > ONE_MB){ $("body").css("opacity", 0.5); } //因为这里图片太大会被卡一下,整个页面会不可操作 $img.attr("src", baseUrl); //还原 if(file.size > ONE_MB){ $("body").css("opacity", 1); } //然后再调一个压缩和上传的函数 handler.compressAndUpload($img, file, $container);

如果图片有几个Mb的,在上面第8行展示的时候被卡一下,笔者曾尝试使用web worker多线程解决,但是由于多线程没有window对象,更不能操作dom,所以不能很好地解决这个问题。采取了一个补偿措施:通过把页面变虚告诉用户现在在处理之中,页面不可操作,稍等一会

2. 压缩图片

压缩图片可以借助canvas,canvas可以很方便地实现压缩,其原理是把一张图片画到一个小的画布,然后再把这个画布的内容导出base64,就能够拿到一张被压小的图片了:

//设定图片最大压缩宽度为1500px var maxWidth = 1500; var resultImg = handler.compress($img[0], maxWidth, file.type);

compress函数进行压缩,在这个函数里首先创建一个canvas对象,然后计算这个画布的大小:

compress: function(img, maxWidth, mime_type, progressBar){ //创建一个canvas对象 var cvs = document.createElement('canvas'); var width = img.naturalWidth, height = img.naturalHeight, imgRatio = width / height; //如果图片维度超过了给定的maxWidth 1500, //为了保持图片宽高比,计算画布的大小 if(width > maxWidth){ width = maxWidth; height = width / imgRatio; } cvs.width = width; cvs.height = height; }

接下来把大的图片画到一个小的画布上,再导出:

//把大图片画到一个小画布 var ctx = cvs.getContext("2d").drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height); //图片质量进行适当压缩 var quality = width >= 1500 ? 0.5 : width > 600 ? 0.6 : 1; //导出图片为base64 var newImageData = cvs.toDataURL(mime_type, quality); var resultImg = new Image(); resultImg.src = newImageData; return resultImg;

最后一行返回了一个被压缩过的小图片,再对这个图片进行裁剪

3. 裁剪图片

裁剪图片,上网找到了一个插件 cropper ,这个插件还是挺强大,支持裁剪、旋转、翻转,但是它并没有对图片真正的处理,只是记录了用户做了哪些变换,然后你自己再去处理。可以把变换的数据传给后端,让后端去处理。这里我们在前端处理,因为我们不用去兼容IE8。

如下,我把一张图片,旋转了一下,同时翻转了一下:

它的输出是:

{ height: 319.2000000000001, rotate: 45, scaleX: -1, scaleY: 1, width: 319.2000000000001 x: 193.2462838120872 y: 193.2462838120872 }

通过这些信息就知道了:图片被左右翻转了一下,同时顺时针转了45度,还知道裁剪选框的位置和大小。通过这些完整的信息就可以做一对一的处理。

在展示的时候,插件使用的是img标签,设置它的css的transform属性进行变换。真正的处理还是要借助canvas,这里分三步说明:

1. 假设用户没有进行旋转和翻转,只是选了简单地选了下区域裁剪了一下,那就简单很多。最简单的办法就是创建一个canvas,它的大小就是选框的大小,然后根据起点x、y和宽高把图片相应的位置画到这个画布,再导出图片就可以了。由于考虑到需要翻转,所以用第二种方法,创建一个和图片一样大小的canvas,把图片原封不动地画上去,然后把选中区域的数据imageData存起来,重新设置画布的大小为选中框的大小,再把imageData画上去,最后再导出就可以了:

var cvs = document.createElement('canvas'); var img = $img[0]; var width = img.naturalWidth, height = img.naturalHeight; cvs.width = width; cvs.height = height; var ctx = cvs.getContext("2d"); var destX = 0, destY = 0; ctx.drawImage(img, destX, destY); //把选中框里的图片内容存起来 var imageData = ctx.getImageData(cropOptions.x, cropOptions.y, cropOptions.width, cropOptions.height); cvs.width = cropOptions.width; cvs.height = cropOptions.height; //然后再画上去 ctx.putImageData(imageData, 0, 0);

代码14行,通过插件给的数据,保存选中区域的图片数据,18行再把它画上去

2. 如果用户做了翻转,用上面的结构很容易可以实现,只需要在第11行 drawImage 之前对画布做一下翻转变化:

//fip if(cropOptions.scaleX === -1 || cropOptions.scaleY === -1){ destX = cropOptions.scaleX === -1 ? width * -1 : 0;// Set x position to -100% if flip horizontal destY = cropOptions.scaleY === -1 ? height * -1 : 0;// Set y position to -100% if flip vertical ctx.scale(cropOptions.scaleX, cropOptions.scaleY); } ctx.drawImage(img, destX, destY);

其它的都不用变,就可以实现上下左右翻转了,难点在于既要翻转又要旋转

3. 两种变换叠加没办法直接通过变化canvas的坐标,一次性drawImage上去。还是有两种办法,第一种是用imageData进行数学变换,计算一遍得到imageData里面,从第一行到最后一行每个像素新的rgba值是多少,然后再画上去;第二种办法,就是创建第二个canvas,第一个canvas作翻转,把它的结果画到第二个canvas,然后再旋转,最后导到。由于第二种办法相对比较简单,我们采取第二种办法:

同上,在第一个canvas画完之后:

ctx.drawImage(img, destX, destY); //rotate if(cropOptions.rotate !== 0){ var newCanvas = document.createElement("canvas"), deg = cropOptions.rotate / 180 * Math.PI; //旋转之后,导致画布变大,需要计算一下 newCanvas.width = Math.abs(width * Math.cos(deg)) + Math.abs(height * Math.sin(deg)); newCanvas.height = Math.abs(width * Math.sin(deg)) + Math.abs(height * Math.cos(deg)); var newContext = newCanvas.getContext("2d"); newContext.save(); newContext.translate(newCanvas.width / 2, newCanvas.height / 2); newContext.rotate(deg); destX = -width / 2, destY = -height / 2; //将第一个canvas的内容在经旋转后的坐标系画上来 newContext.drawImage(cvs, destX, destY); newContext.restore(); ctx = newContext; cvs = newCanvas; }

将第二步的代码插入第一步,再将第三步的代码插入第二步,就是一个完整的处理过程了。

最后再介绍下上传

4. 文件上传和上传进度

文件上传只能通过表单提交的形式,编码方式为 multipart/form-data ,这个我在 《三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader》 已做详细讨论,可以通过写一个form标签进行提交,但也可以模拟表单提交的格式,表单提交的格式在那篇文章已提及。

首先创建一个ajax请求:

var xhr = new XMLHttpRequest(); xhr.open('POST', upload_url, true); var boundary = 'someboundary'; xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

并设置编码方式,然后拼表单格式的数据进行上传:

var data = img.src; data = data.replace('data:' + file.type + ';base64,', ''); xhr.sendAsBinary([ //name=data '--' + boundary, 'Content-Disposition: form-data; name="data"; filename="' + file.name + '"', 'Content-Type: ' + file.type, '', atob(data), '--' + boundary, //name=docName '--' + boundary, 'Content-Disposition: form-

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器XML数据压缩图Head
分页:12
转载请注明
本文标题:怎样实现前端裁剪上传图片功能
本站链接:http://www.codesec.net/view/483323.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(65)