怎样通过Canvas及FileAPI缩放并上传图片-
新建一个尽管的会员界面，并允许你控制图片的大小。上传到办事器端的数据，并不需要处置enctype为 multi-part/form-data 的状况，仅仅一个简略的POST表单处置程序就可以了. 好了，下面附上完备的代码示例
示例地址：Canvas Resize Demo
原文作者：Dr. Tom Trenka
原文日期： 2013年8月6日
翻译日期： 2013年8月8日
Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个庞大的荣誉。Tom是Dojo框架的最初奉献者之一，也是我在SitePen企业的良师益友.我见证了他最顶级的天才干力，而且他总是首先个之前瞻性的解决方案预感了许多棘手的题目。他总是站在局外思索，打破通例但却又坚实牢靠地解决边沿题目。本文就是一个完善的例证。
比来我总是被问道要制造一个会员接口API，允许会员上传图片到办事器上(陪伴其他的事情),并能在我们企业供给支撑的批量网站的客户端上运用。平常来说这都是很容易的事情——新建一个form表单，增加一个file类型的input输入框，让会员从电脑里选中图片，并在form标签上设定enctype="multipart/form-data"表单属性，然后上传即可。非常简略，不是吗？事实上，这里有一个脚够简略的例子；点击进入
但是要是你想要通过某些方式预先处置一下图片再上传，那该怎么办？比方说，你必需先紧缩图片尺寸，或者需要图片只能是某些品种的格局，如 png 或者jpg,你怎么办？
用canvas来解决!
Canvas简介
canvas 是一个HTML5新增的DOM元素，允许会员在页面上直接地绘制图形，平常是运用JavaScript.而不一样的格局规范也是不一样的，比方SVG是光栅API(raster API) 而VML却是向量API(vector API).可以考虑运用Adobe Illustrator(矢量图)作图与运用 Adobe Photoshop (光栅图)作图的区别。
在canvas(画布)上能做的事情就是读取和渲染图像,而且允许你通过JavaScript操作图像数据。已经有许多现存的文章来为你演示根本的图像处置——主要关注与各种不一样的图像过滤技术( image filtering techniques)——但我们需要的仅仅是缩放图片并转换到特定的文件格局，而canvas完全可以做到这些事情。
我们假定的需求，比方图像高度不超过100像素，无论原始图像有多高。根本的代码如下所示:
// 参数，最大高度
var MAX_HEIGHT = 100;
// 渲染
function render(src){
// 新建一个 Image 对象
var image = new Image();
// 绑定 load 事件处置器，加载完成后施行
image.onload = function(){
// 猎取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 要是高度超标
if(image.height > MAX_HEIGHT) {
// 宽度等比例缩放 *=
image.width *= MAX_HEIGHT / image.height;
image.height = MAX_HEIGHT;
}
// 猎取 canvas的 2d 环境对象,
// 可以了解Context是治理员，canvas是屋子
var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，image 没有参加到 dom之中
};
// 设定src属性，阅读器会主动加载。
// 记住必需先绑定事件，才干设定src属性，不然会出同步题目。
image.src = src;
};在上面的例子中，你可以运用canvas 的 toDataURL() 办法猎取图像的 Base64编码的值(可以相似了解为16进制字符串,或者二进制数据流).
注意： canvas 的 toDataURL() 猎取的URL以字符串开头，有22个无用的数据 "data:image/png;base64,"，需要在客户端或者办事端进行过滤.
准则上只有阅读器支撑，URL地址的长度是没有限定的，而1024的长度限定，是老一代IE所独占的。
请问,怎样猎取我们需要的图像呢？
好孩子,很快乐你能这么问。你并不克不及通过File 输入框来直接处置，你从这个文件输入框元素所能猎取的仅仅是会员所选中文件的path途径。按照通例想象，你可以通过这个path途径信息来加载图像，但是，在阅读器里面这是不实际的。(译者注:阅读器厂商必需保障本人的阅读器绝对平安，才干获得市场，至少以免媒体的袭击，要是允许这样做，那歹意网址可以通过拼凑文件途径来尝试猎取某些敏锐信息).
为了实现这个需求，我们可以运用HTML5的File API 来读取会员磁盘上的文件，并用这个file来作为图像的源(src,source).
File API简介
新的File API接口是在不违反任何平安沙盒法则下，读取和列出会员文件名目的一个路径—— 通过沙盒(sandbox)限定，歹意网站并不克不及将病毒写入会员磁盘，固然更不克不及施行。
我们要运用的文件读取对象叫做 FileReader,FileReader允许开发者读取文件的内容(概括阅读器的实现方式可能大不雷同)。
假如我们已经猎取了图像文件的path途径，那么依赖前面的代码，运用FileReader来加载和渲染图像就变得很容易了：
// 加载 图像文件(url途径)
function loadImage(src){
// 过滤掉 非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log("选中的文件类型不是图片: ", src.type);
} else {
window.confirm("只能选中图片文件");
}
return;
}
// 新建 FileReader 对象 并调取 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件主动回调函数
reader.onload = function(e){
// 调取前面的 render 函数
render(e.target.result);
};
// 读取文件内容
reader.readAsDataURL(src);
};请问，怎样猎取文件呢？
小白兔，要有耐心！我们的下一步就是猎取文件，固然有好多办法可以实现啦。例如：你可以用文本框让会员输入文件途径，但很显然大多数会员都不是开发者，对输入什么值基本就不理解.
为了会员运用利便，我们采纳 Drag and Drop API接口。
运用 Drag and Drop API
拖拽接口(Drag and Drop)非常简略——在大多数的DOM元素上，你都可以通过绑定事件处置器来实现. 只有会员从磁盘上拖动一个文件到dom对象上并摊开鼠标，那我们就可以读取这个文件。代码如下：
function init(){
// 猎取DOM元素对象
var target = document.getElementById("drop-target");
// 阻止 dragover(拖到DOM元素上方) 事件通报
target.addEventListener("dragover", function(e){e.preventDefault();}, true);
// 拖动并摊开鼠标的事件
target.addEventListener("drop", function(e){
// 阻止默许事件，以及事件传播
e.preventDefault();
// 调取前面的加载图像 函数，参数为dataTransfer对象的首先个文件
loadImage(e.dataTransfer.files[0]);
}, true);
var setheight = document.getElementById("setheight");
var maxheight = document.getElementById("maxheight");
setheight.addEventListener("click", function(e){
//
var value = maxheight.value;
if(/^\d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
}
e.preventDefault();
},true);
var btnsend = document.getElementById("btnsend");
btnsend.addEventListener("click", function(e){
//
sendImage();
},true);
};我们还可以做一些其他的处置，比方显示预览图。但要是不想紧缩图片的话，那很可能没什么用。我们将采纳Ajax通过HTTP 的post方式上传图片数据。下面的例子是运用Dojo框架来完成要求的，固然你也可以采纳其他的Ajax技术来实现.。
Dojo 代码如下:
// 译者并不懂Dojo，所以将在背面附上jQuery的实现
// Remember that DTK 1.7+ is AMD!
require(["dojo/request"], function(request){
// 设定要求URL,参数，以及回调。
request.post("image-handler.php", {
data: {
imageName: "myImage.png",
imageData: encodeURIComponent(document.getElementById("canvas").toDataURL("image/png"))
}
}).then(function(text){
console.log("The server returned: ", text);
});
});jQuery 实现如下：
// 上传图片，jQuery版
function sendImage(){
// 猎取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 猎取Base64编码后的图像数据，格局是字符串
// "data:image/png;base64,"开头,需要在客户端或者办事器端将其去除，背面的局部可以直接写入文件。
var dataurl = canvas.toDataURL("image/png");
// 为平安 对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
var imagedata = encodeURIComponent(dataurl);
//var url = $("#form").attr("action");
// 1. 要是form表单欠好处置,可以运用某个hidden隐蔽域来设定要求地址
//
var url = $("input[name='action']").val();
// 2. 也可以直接用某个dom对象的属性来猎取
//
// var url = $("#imageaction").attr("action");
// 由于是string，所以办事器需要对数据进行转码，写文件操纵等。
// 个人约定，所有http参数名字全部小写
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: "myImage.png",
imagedata: imagedata
};
jQuery.ajax( {
url : url,
data : data,
type : "POST",
// 等待的返回值类型
dataType: "json",
complete : function(xhr,result) {
//console.log(xhr.responseText);
var $tip2 = $("#tip2");
if(!xhr){
$tip2.text('网络连贯失败!');
return false;
}
var text = xhr.responseText;
if(!text){
$tip2.text('网络差错!');
return false;
}
var json = eval("("+text+")");
if(!json){
$tip2.text('解析差错!');
return false;
} else {
$tip2.text(json.message);
}
//console.dir(json);
//console.log(xhr.responseText);
}
});
};OK,搞定！你还需要做的，就是新建一个尽管的会员界面，并允许你控制图片的大小。上传到办事器端的数据，并不需要处置enctype为 multi-part/form-data 的状况，仅仅一个简略的POST表单处置程序就可以了.
好了，下面附上完备的代码示例：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>通过Canvas及File API缩放并上传图片 打赏
