图片上传组件开发

时间 2019-12-11

标签图片上传组件开发繁體版

原文原文链接

我就要自行车 - 需求整理

放眼WWW，通常的图片上传模块，主要就是实现了三个功能，图片的预览，图片的剪裁及预览，图片的上传，那我也就整这么一个吧，再细化一下需求。javascript

图片的预览

用户使用：用户点击“选择图片”，弹出文件浏览器，能够选择本地的图片，点击确认后，所选图片会按照原始比例出如今页面的浏览区域中。前端

组件调用：开发者能够本身定义图片预览区域的大小，并限定所传图片的文件大小和尺寸大小。java

图片的剪裁

用户使用：用户根据提示，在预览区域的图片上拖动鼠标框出想要上传的图片区域，而且能在结果预览区域看到本身的剪裁结果。web

组件调用：开发者能够自定义是否剪裁图片，并能够定义是否限定剪裁图片的大小及比例，而且设定具体大小及比例。ajax

图片的上传

用户使用：用户点击“图片上传”，图片开始上传，现实“上传中…”，完成后显示“上传完成”。canvas

组件调用：开发者获得base64格式的urlData图片，本身编写调用Ajax的函数及其回调函数。api

扔出原型图

做为设计师，扔图是个人最爱，画了一套全功能，包含剪裁及剪裁浏览的原型图浏览器

state-1:初始状态：app

state-2:点击"选择图片"，浏览本地后载入图片：异步

state-3:剪裁，在图片区域上拖动鼠标选择要剪裁的部分，确认要上传的部分：

一次历史性的对话 - 本地图片读取

自打干上web开发这活，就都是在捣鼓浏览器内部这点事，从没想过跟浏览器以外计算机本地的一些文件能发生什么关系。可是该来的总要来，既然要上传图片，就确定要从计算机本地来选择文件并在浏览器内打开，这历史性的对话就要这么开启了…

图片的选择

其实在HTML中的 <input>标签就提供了浏览本地文件的功能，前提是 type="file"，真是很讲道理… 试过就知道一点击就会打开文件浏览器。

<input id="inputArea" type="file" />

但这么作有两个经典的问题：

第一，会有一个输入框傻乎乎的在那里…
第二，我用的是Ajax，怎么才能get到表单当中的文件呢？

对于问题一，很好解决直接各类方式hide这个input标签便可，再主动触发 click()：

var imgFrom = document.getElementById("inputArea");
function loadImg(){
imgFrom.click();
}

对于问题二，这就要介绍一下 FormData对象了。

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,咱们能够经过JavaScript用一些键值对来模拟一系列表单控件,咱们还可使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优势就是咱们能够异步上传一个二进制文件.

摘自MDN Web docs - Web技术文档／Web API 接口／FormData

正如上面的文档所说 FormData对象能够干的事无非就是用javascript模拟表单控件，也正由于如此因此能够在模拟的表单中放入一个文件：

var myFrom = new FormData();
var imageData = imgFrom.files[0];//获取表单中第一个文件
myFrom.append("image",imageDate);//向表单中添加一个键值对
console.log(myFrom.getAll("image"));//获取表单中image字段对应的值，结果见下图

正如咱们所见，文件咱们已经经过Web拿到手了。

图片的展示

既然是要上传图片，咱们确定得知道本身传的是啥图片啊，因此下一步就是如何把读取的图片展示在页面上了，正如上图中的显示，个人获得的图片是一个 File对象，而 File对象是特殊的 Blob对象，那 Blob对象又是个啥呢…

Blob 对象表示不可变的相似文件对象的原始数据。Blob表示不必定是JavaScript原生形式的数据。File 接口基于Blob，继承了 blob的功能并将其扩展使其支持用户系统上的文件。

摘自MDN Web docs - Web技术文档／Web API 接口／Blob

说实话，真是懵逼。但仔细理解下大概意思就是 Blob对象是用来表示／承载文件对象的原始数据（二进制）的，借助一些博文会有助于理解：

js中关于Blob对象的介绍与使用 - 可乐Script
HTML5 Blob对象 - zdy0_2004

说到底，重点不在这，了解一下有个概念便可，重点在于咱们怎么展现这个 File对象

这就要请出 FileReader对象了。

FileReader 对象容许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

摘自MDN Web docs - Web技术文档／Web API 接口／FileReader

不难看出， FileReader对象就是用来读取本地文件的，而这其方法 readAsDataURL()就是咱们要用的东西啦。

该方法会读取指定的 Blob 或 File 对象。读取操做完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

摘自MDN Web docs - Web技术文档／Web API 接口／FileReader／FileReader.readAsDataURL()

这里面又提到一个新名词data:URL，也就是说 readAsDataURL()的做用就是能把文件转换为data:URL，不过这个data:URL又是什么呢，执行来看看：

var reader = new FileReader(); //调用FileReader对象
reader.readAsDataURL(imgData); //经过DataURL的方式返回图像
reader.onload = function(e) {
console.log(e.target.result);//看看你是个啥
}

控制台的结果全脸懵逼。

能够经过这篇文章去大概了解一下DATA URL简介及DATA URL的利弊 - 薛陈磊

说到底这dataURL我就粗略的理解它为URL形式的data，也就是说这段URL并非与普通的URL同样指向某个地址，而是它自己就是数据，咱们试着把这一堆字符粘到一个 <img>的 src属性中。

终于看到了，结果正如所料，将这段包含了数据的URL赋给一个 <img>确实可让数据被展示为图片。

至此，咱们实现了本地文件的读取及展示

指哪儿截哪儿 - 利用canvas的图片截取

舒适提示-乱入：看明白这里须要对canvas有基本的了解：MDN Web docs - Web技术文档／Web API接口／Canvas／Canvas教程

在Web上对图像进行操做，没有比canvas相关技术更合适的了，因此本文用canvas技术来实现对图片的截取。

canvas中的图片展示

在上文中，咱们利用 <img>展示出了咱们选择的图片，可是咱们的图片截取功能但是要利用 <canvas>来实现的，因此怎么在 <canvas>中展示咱们刚才获取的图片就是下一步要干的事情了。

canvas的API中自带 drawImage()函数，其做用就是在 <canvas>中渲染一张图片出来，其能够支持多种图片来源见：MDN Web docs - Web技术文档／Web API接口／CanvasRenderingContext2D／CanvasRenderingContext2D.drawImage()

最简单的，咱们直接把刚刚显示图片的那个 <img>传入是否是就能够呢？

var theCanvas = document.getElementById("imgCanvas");
var canvasImg = theCanvas.getContext("2d");//获取2D渲染背景
var img = document.getElementById("image");
img.onload = function(){//确认图片已载入
canvasImg.drawImage(img,0,0);
}

结果以下：

从图中看，左侧是以前的''，右侧是渲染了图片信息的 <canvas>。这么看来虽然成功？在 <canvas>中渲染出了图片可是有两个明显的问题：

左边的''留着干啥？
右边看上去是否是有点不同？

这俩问题其实都好办，针对第一个问题，咱们其实能够根本不用实体的''直接利用'Image'对象便可，第二个问题明显是由于 <canvas>的大小与获取到的图片大小不一致所产生的，综合这两点，对代码进行进化！

var theCanvas = document.getElementById("imgCanvas");
var canvasImg = theCanvas.getContext("2d");
var img = new Image();//建立img对象
reader.onload = function(e) {
img.src = e.target.result;
}
img.onload = function(){
theCanvas.Width = img.width;//将img对象的长款赋给canvas标签
theCanvas.height = img.height;
canvasImg.drawImage(img,0,0);
}

结果与咱们所期待的同样，至此咱们成功的在 <canvas>中展示了从本地获取的图片。

canvas中图片的截取

其实截图，说白了就是在一个图像上，获取某个区域中的图像信息。

canvas做为专门用来处理图像及像素相关的一套API，获取区域中的相关图像信息能够说是再简单不过的事情，利用 getImageData()函数便可 //详情，固然咱们不光要把图像信息获取到，最好还能展示出来咱们的截图结果，这里就要用到与之相对的 putImageData()函数 //详情。

var resultCanvas = document.getElementById("resultCanvas");
var resultImg = resultCanvas.getContext("2d");
var cutData = canvasImg.getImageData(100,100,200,200);
resultImg.putImageData(cutData,0,0);

结果如图：

我也要画一个圈／框

既然这个工具是面向用户的，截图的过程确定是要所见即所得的，在函数 getImageData()中有4个参数，分别是截图起点的两个坐标和区域的宽度及高度，因此问题就变成了如何更合理的让用户输入这4个值。

其实现存的主流解决方案就作的很是好了：在图上拖动鼠标，拉出一个框，这个框内就是用户但愿截取的区域。

在画布上画出一个框很简单，只需用到 strokeRect()函数 //详情。可是让用户本身拖出一个框就比较复杂了，先分析一下用户的一套动做都有什么：

用户选定起始点，点下鼠标左键。
用户选定截图区域的大小，保持鼠标左键不抬起，同时移动鼠标选择。
用户完成选择，抬起鼠标左键。

回过头再来看程序须要干什么：

获取起始点的坐标，并记录为已点击状态。
判断一下若是为已点击状态那么，获取每一次移动／帧的鼠标坐标，并计算出与起始点之间的横纵坐标距离，而这距离就是所画框的长度和宽度，清除上一帧的整个画面，再绘制一个新的图片再画一个新的框，同时按照框的起始坐标及宽高，截取图像信息，再清除预览区域的上一帧的画布，再将这一帧的图像信息载入。
鼠标抬起后，中止记录及绘制，保持最终一帧的框停留在画面上。

在这里，要说明一下，为何非要清除整个画面不可，其实能够把经过 canvas.getContext("2d")获取到的2D 画布的渲染上下文 //详情就看成一块画布，已经渲染出来的东西就已经留在了上面，没法再修改，若是想要更改画面上已经存在的元素的大小位置形状等等属性，那么在程序层面，就只能（我的理解，不必定对，若是有问题请必定跟我唠唠）把以前的画布清空再从新渲染。

这个思路与咱们以前端开发中动画相关的开发思路不一样，并非像以前那样直接操做现有元素属性就能够改变该元素在画面上的呈现结果的，而在这里其实更像是在现实生活中的动画制做原理就是：每一帧都须要从新绘制整张画面。而其实这是任何动画渲染方式的最底层思路与行为。话说回来按照上文相关的开发思路，实现这个功能的代码以下：

var flag = false;//记录是否为点击状态的标记
var W = img.width;
var H = img.height;
var startX = 0;
var startY = 0;
//当鼠标被按下
theCanvas.addEventListener("mousedown", e => {
flag = true;//改变标记状态，置为点击状态
startX = e.clientX;//得到起始点横坐标
startY = e.clientY;//得到起始点纵坐标
})
//当鼠标在移动
theCanvas.addEventListener("mousemove", e => {
if(flag){//判断鼠标是否被拖动
canvasImg.clearRect(0,0,W,H);//清空整个画面
canvasImg.drawImage(img,0,0);//从新绘制图片
canvasImg.strokeRect(startX, startY, e.clientX - startX, e.clientY - startY);//绘制黑框
resultImg.clearRect(0,0,cutData.width,cutData.height);//清空预览区域
cutData = canvasImg.getImageData(startX, startY, e.clientX - startX, e.clientY - startY);//截取黑框区域图片信息
resultImg.putImageData(cutData,0,0);//将图片信息赋给预览区域
}
})
//当鼠标左键抬起
theCanvas.addEventListener("mouseup", e => {
flag = false;//将标志置为已抬起状态
})

结果如图：

能不能弄的高大上一点啊

主要吧，这个黑框太丑了，透露着一种原始和狂野，以及来自工科男审美的粗糙感…能不能弄的好看点，起码让它看上去是一个工具不是一个实验。

个人想法是这样的，待被截取的图片上应该蒙上一层半透明白色遮罩，用户框选出的部分是没有遮罩的，这样效果能够为功能增长视觉上的材质感及温馨感，同时显得高端。

具体效果是这样的-下图来自ps：

是否是稍微好些了？但是，怎么实现？

简单来讲，就是在原有的画布上再蒙半透明的一层画布，而后让这一层有一部分是没有的就能够实现了，总的来讲就是蒙版和遮罩的思路，在canvas中也有相关的api，可是我愣是没看明白。负责任的贴一个连接

不过开发就是这样，条条大路出bug。我想到这个功能的瞬间脑子像抽了同样，出现了这么一种实现方法。见下图：

mask层能够分为A，B，C，D四个矩形区域，在图中两个蓝色的点是已知的（用户本身画出来的），在下层图片大小已知的前提下，这四个矩形区域的四个点都是能够计算出来的，从而其高度和宽度也能够计算出来，这样就能够利用这些数据画出一个半透明的矩形，将四个半透明矩形都画出来后，就可以实现以前设计出的效果了，具体代码以下：

theCanvas.addEventListener("mousemove", e => {
if(flag){
canvasImg.clearRect(0,0,W,H);
resultImg.clearRect(0,0,cutData.width,cutData.height);
canvasImg.drawImage(img,0,0);
canvasImg.fillStyle = 'rgba(255,255,255,0.6)';//设定为半透明的白色
canvasImg.fillRect(0, 0, e.clientX, startY);//矩形A
canvasImg.fillRect(e.clientX, 0, W, e.clientY);//矩形B
canvasImg.fillRect(startX, e.clientY, W-startX, H-e.clientY);//矩形C
canvasImg.fillRect(0, startY, startX, H-startY);//矩形D
cutData = canvasImg.getImageData(startX, startY, e.clientX - startX, e.clientY - startY);
resultImg.putImageData(cutData,0,0);
}
})

效果如图：

没有什么把本身的脑残想法实现更爽的了

至此，截图的基本功能都实现了，但还差最后一步。

另外一次历史性的对话 - 图片上传

图片已经截出来了，下一步就是怎么上传了，经过Ajax上传，须要将图像数据转化为 File，而在canvas的API中自带 toBlob()函数。 //详情

var resultFile = {}
theCanvas.addEventListener("mouseup", e => {
resultCanvas.toBlob(blob => {
resultFile = blob;
console.log(blob);//Blob(1797) {size: 1797, type: "image/png"}
}
})
flag = false;
})