最近我被要求创建一个用户界面,允许有人上传图片到服务器(在其他事物之中),它可以用在各种网站，提供给它的客户。通常情况下,这将是一个容易的任务——创建一个窗体,带有文件输入,选择计算机上的文件,并上传它使用multipart/form-data作为enctype形式标记。很简单,对吗?事实上,有一个简单的例子就在这个网站。

       但是如果你想上传前进行预览，怎么做？换句话说,如果你不得不调整大小图像?如果你需要,图像是一个特定的文件类型,像一个PNG或者JPG吗?canvas来救援!

       查看效果：canvas处理图像。

       你可以在上面演示网址上传一张自己喜欢的图片，会在右侧显示，并做了尺寸整理。

       什么是Canvas？

       画布是一个DOM元素,HTML5中的新成员,允许用户直接在页面上绘制图形,通常通过JavaScript。它不同于规格如SVG或VML,因为它是一个光栅API与向量API;想象它是画东西的差别，使用Adobe Illustrator(矢量图)和使用Adobe Photoshop(光栅)。

       在画布上能做的事情就是读取和渲染图像,并允许您使用JavaScript操作,图像数据。有很多的文章,告诉你一些基本的图像处理，多数他们专注于各种图像过滤技术,但我们只需要能够调整我们的形象,以一个特定的规范,canvas可以做到,没有问题。

       说说我们的目标是为了保证一个图像为100像素，无论原来的高度是多少。基本代码:

var MAX_HEIGHT = 100; function render(src){      var image = new Image();      image.onload = function(){      var canvas = document.getElementById("myCanvas");      if(image.height > MAX_HEIGHT) {     image.width *= MAX_HEIGHT / image.height;     image.height = MAX_HEIGHT;     }     var ctx = canvas.getContext("2d");     ctx.clearRect(0, 0, canvas.width, canvas.height);     canvas.width = image.width;     canvas.height = image.height;     ctx.drawImage(image, 0, 0, image.width, image.height); }; image.src = src;

}

       看看它是怎么做到的：

         1、创建一个JavaScript图像对象。

         2、附上一个处理程序，onload事件。

         3、为了看看加载图像的尺寸,如果原始图像的高度大于我们最大允许的,改变这些维度。

         4、清除所有在我们的画布元素上。

         5、设置画布尺寸对图像的尺寸,

         6、绘制图像到画布上。

       从那里,您可以使用toDataURL Canvas API的方法得到一个基本的64位-编码版本的图片。

       但是等等……我们如何得到图像呢?

       好学徒,我很高兴你问。你不能使用文件输入;唯一的信息是你可以从该元素获取文件路径,有人选择了。你可以使用这个路径信息,试图加载图像,但跨浏览器时这技术是不可靠的。所以,我们将使用HTML5文件API从某人的磁盘来读取一个文件,并使用它作为源文件。

       什么是File API？

       File API 提供了在 Web Application 客户端表现和操作文件对象的 API, 以及可编程的选择文件和访问它们的数据。FileReader: 可以把 File 或者 Blob 对象读进内存，并且可以使用进度事件和进度处理器属性访问这些 Files 或者 Blobs 的数据。

function loadImage(src){     if(!src.type.match(/image.*/)){         console.log("不是图片: ", src.type);         return;     }          var reader = new FileReader();     reader.onload = function(e){         render(e.target.result);     };     reader.readAsDataURL(src); }

       我们做的是创建一个FileReader对象,添加一个处理程序的onload方法,然后读取文件内容。很简单,对吗?

       但是你怎么得到那个文件吗?

       嗯,要有耐心!当然这是我们的下一步。有很多方法去实现;例如,您可以有一个简单的文本输入使路径输入到一个对象,但是显然大多数人不是开发人员,不会有一个真正的突破口,如何做正确。使它对我们的用户变得容易,我们将使用拖放API……

       使用拖放API

       拖拽API非常简单,它由一组DOM事件组成,您将处理程序函数。我们想让用户把一个元素从磁盘上把文件拖到某个地方。这是我们的设置:

var target = document.getElementById("drop-target"); target.addEventListener("dragover", function(e){e.preventDefault();}, true); target.addEventListener("drop", function(e){    e.preventDefault();       loadImage(e.dataTransfer.files[0]); }, true);

       这是非常简单的:我们指定一个元素作为我们的拖放目标。

       还可以增添更多的功能，发挥你的想象力吧！