这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
文件上传功能在各大网站经常会用到,今天小编通过本文给大家介绍了 WEB 前端实现裁剪上传图片功能的相关资料, 需要的朋友可以参考下
最后的效果如下:
这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现:
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);
- });
- }
- }
- varhandler = {
- init: function($container) {
- //需要把dragover的默认行为禁掉,不然会跳页
- $container.on("dragover",
- function(event) {
- event.preventDefault();
- });
- $container.on("drop",
- function(event) {
- event.preventDefault();
- //这里获取拖过来的图片文件,为一个File对象
- varfile = 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 = "";
- });
- $container.on("change", "input[type=file]",
- function(event) {
- if (!this.value) return;
- varfile = 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);
- },
- handleDrop: function($container, file) {
- var$img = $container.find("img");
- handler.readImgFile(file, $img, $container);
- },
我的代码里面又调了个 readImgFile 的函数,helper 的函数比较多,主要是为了拆解大模块和复用小模块。
在 readImgFile 里面读取图片文件内容:
使用 FileReader 读取文件 JavaScript
- 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);
- }
- readImgFile: function(file, $img, $container) {
- varreader = newFileReader(file);
- //检验用户是否选则是图片文件
- if (file.type.split("/")[0] !== "image") {
- util.toast("You should choose an image file");
- return;
- }
- reader.onload = function(event) {
- varbase64 = 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);
- //获取图片base64内容
- varbase64 = 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,所以不能很好地解决这个问题。采取了一个补偿措施:通过把页面变虚告诉用户现在在处理之中,页面不可操作,稍等一会
这里还会有一个问题,就是 ios 系统拍摄的照片,如果不是横着拍的,展示出来的照片旋转角度会有问题,如下一张竖着拍的照片,读出来是这样的:
即不管你怎么拍,ios 实际存的图片都是横着放的,因此需要用户自己手动去旋转。旋转的角度放在了 exif 的数据结构里面,把这个读出来就知道它的旋转角度了,用一个 EXIF 的库读取:
读取 exif 的信息
- readImgFile: function(file, $img, $container) {
- EXIF.getData(file,
- function() {
- var orientation = this.exifdata.Orientation,
- rotateDeg = 0;
- //如果不是ios拍的照片或者是横拍的,则不用处理,直接读取
- if (typeof orientation === "undefined" || orientation === 1) {
- //原本的readImgFile,添加一个rotateDeg的参数
- handler.doReadImgFile(file, $img, $container, rotateDeg);
- }
- //否则用canvas旋转一下
- else {
- rotateDeg = orientation === 6 ? 90 * Math.PI / 180 : orientation === 8 ? -90 * Math.PI / 180 : orientation === 3 ? 180 * Math.PI / 180 : 0;
- handler.doReadImgFile(file, $img, $container, rotateDeg);
- }
- });
- }
- readImgFile: function(file, $img, $container) {
- EXIF.getData(file,
- function() {
- varorientation = this.exifdata.Orientation,
- rotateDeg = 0;
- //如果不是ios拍的照片或者是横拍的,则不用处理,直接读取
- if (typeoforientation === "undefined" || orientation === 1) {
- //原本的readImgFile,添加一个rotateDeg的参数
- handler.doReadImgFile(file, $img, $container, rotateDeg);
- }
- //否则用canvas旋转一下
- else {
- rotateDeg = orientation === 6 ? 90 * Math.PI / 180 : orientation === 8 ? -90 * Math.PI / 180 : orientation === 3 ? 180 * Math.PI / 180 : 0;
- handler.doReadImgFile(file, $img, $container, rotateDeg);
- }
- });
- }
知道角度之后,就可以用 canvas 处理了,在下面的压缩图片进行说明,因为压缩也要用到 canvas
2. 压缩图片
压缩图片可以借助 canvas,canvas 可以很方便地实现压缩,其原理是把一张图片画到一个小的画布,然后再把这个画布的内容导出 base64,就能够拿到一张被压小的图片了:
- //设定图片最大压缩宽度为1500px
- var maxWidth = 1500;
- var resultImg = handler.compress($img[0], maxWidth, file.type);
- //设定图片最大压缩宽度为1500px
- varmaxWidth = 1500;
- varresultImg = handler.compress($img[0], maxWidth, file.type);
compress 函数进行压缩,在这个函数里首先创建一个 canvas 对象,然后计算这个画布的大小:
- compress: function(img, maxWidth, mimeType) {
- //创建一个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;
- }
- compress: function(img, maxWidth, mimeType) {
- //创建一个canvas对象
- varcvs = document.createElement('canvas');
- varwidth = 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(mimeType, quality);
- var resultImg = new Image();
- resultImg.src = newImageData;
- return resultImg;
- //把大图片画到一个小画布
- varctx = cvs.getContext("2d").drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height);
- //图片质量进行适当压缩
- varquality = width >= 1500 ? 0.5 : width > 600 ? 0.6 : 1;
- //导出图片为base64
- varnewImageData = cvs.toDataURL(mimeType, quality);
- varresultImg = newImage();
- resultImg.src = newImageData;
- returnresultImg;
最后一行返回了一个被压缩过的小图片,就可对这个图片进行裁剪了。
在说明裁剪之前,由于第二点提到 ios 拍的照片需要旋转一下,在压缩的时候可以一起处理。也就是说,如果需要旋转的话,那么画在 canvas 上面就把它旋转好了:
- var ctx = cvs.getContext("2d");
- var destX = 0,
- destY = 0;
- if (rotateDeg) {
- ctx.translate(cvs.width / 2, cvs.height / 2);
- ctx.rotate(rotateDeg);
- destX = -width / 2,
- destY = -height / 2;
- }
- ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, destX, destY, width, height);
- varctx = cvs.getContext("2d");
- vardestX = 0,
- destY = 0;
- if (rotateDeg) {
- ctx.translate(cvs.width / 2, cvs.height / 2);
- ctx.rotate(rotateDeg);
- destX = -width / 2,
- destY = -height / 2;
- }
- ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, destX, destY, width, height);
这样就解决了 ios 图片旋转的问题,得到一张旋转和压缩调节过的图片之后,再用它进行裁剪和编辑
3. 裁剪图片
裁剪图片,上网找到了一个插件 cropper,这个插件还是挺强大,支持裁剪、旋转、翻转,但是它并没有对图片真正的处理,只是记录了用户做了哪些变换,然后你自己再去处理。可以把变换的数据传给后端,让后端去处理。这里我们在前端处理,因为我们不用去兼容 IE8。
如下,我把一张图片,旋转了一下,同时翻转了一下:
它的输出是:
- {
- height: 319.2000000000001,
- rotate: 45,
- scaleX: -1,
- scaleY: 1,
- width: 319.2000000000001 x: 193.2462838120872 y: 193.2462838120872
- } {
- 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);
- varcvs = document.createElement('canvas');
- varimg = $img[0];
- varwidth = img.naturalWidth,
- height = img.naturalHeight;
- cvs.width = width;
- cvs.height = height;
- varctx = cvs.getContext("2d");
- vardestX = 0,
- destY = 0;
- ctx.drawImage(img, destX, destY);
- //把选中框里的图片内容存起来
- varimageData = 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 之前对画布做一下翻转变化:
canvas flip 实现 JavaScript
- //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);
- //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 画完之后:
实现旋转、翻转结合 JavaScript
- 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;
- }
- ctx.drawImage(img, destX, destY);
- //rotate
- if (cropOptions.rotate !== 0) {
- varnewCanvas = 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));
- varnewContext = 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 请求:
JavaScript
- var xhr = new XMLHttpRequest();
- xhr.open('POST', upload_url, true);
- var boundary = 'someboundary';
- xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
- varxhr = newXMLHttpRequest();
- xhr.open('POST', upload_url, true);
- varboundary = 'someboundary';
- xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
并设置编码方式,然后拼表单格式的数据进行上传:
ajax 上传 JavaScript
- 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-data; name="docName"', '', file.name, '--' + boundary + '--'].join('\r\n'));
- vardata = 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-data; name="docName"', '', file.name, '--' + boundary + '--'].join('\r\n'));
表单数据不同的字段是用 boundary 的随机字符串分隔的。拼好之后用 sendAsBinary 发出去,在调这个函数之前先监听下它的事件,包括
1) 上传的进度:
上传进度 JavaScript
- xhr.upload.onprogress = function(event) {
- if (event.lengthComputable) {
- duringCallback((event.loaded / event.total) * 100);
- }
- };
- xhr.upload.onprogress = function(event) {
- if (event.lengthComputable) {
- duringCallback((event.loaded / event.total) * 100);
- }
- };
这里凋 duringCallback 的回调函数,给这个回调函数传了当前进度的参数,用这个参数就可以设置进度条的过程了。进度条可以自己实现,或者直接上网找一个,随便一搜就有了。
2) 成功和失败:
成功和失败回调 JavaScript
- xhr.onreadystatechange = function() {
- if (this.readyState == 4) {
- if (this.status == 200) {
- successCallback(this.responseText);
- } else if (this.status >= 400) {
- if (errorCallback && errorCallback instanceof Function) {
- errorCallback(this.responseText);
- }
- }
- }
- };
- xhr.onreadystatechange = function() {
- if (this.readyState == 4) {
- if (this.status == 200) {
- successCallback(this.responseText);
- }
- elseif(this.status >= 400) {
- if (errorCallback && errorCallback instanceofFunction) {
- errorCallback(this.responseText);
- }
- }
- }
- };
这个上传功能参考了一个 JIC 插件
至此整个功能就拆解说明完了,上面的代码可以兼容到 IE10,FileReader 的 api 到 IE10 才兼容,问题应该不大,因为微软都已经放弃了 IE11 以下的浏览器,为啥我们还要去兼容呢。
这个东西一来减少了后端的压力,二来不用和后端来回交互,对用户来说还是比较好的,除了上面说的一个地方会被卡一下之外。核心代码已在上面说明,完整代码和 demo 就不再放出来了。
以上所述是小编给大家介绍的 WEB 前端实现裁剪上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0722/331126.html