HTML5神技：Canvas处理图像，轻松上传照片

理解需求：创建用户接口API

咱们来搞个上传照片的小程序！其实很简单，写个API就能解决问题~弄个包含file类型input框的表单，加上“multipart/form-data”这个标签就成！

// 参数，最大高度 
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编码！不过别急，这个 URL 前头还多了22个”data:image/png;base64,”，记得给去掉！

利用Canvas处理图像

Canvas真是牛逼哄哄，只要借助HTML5技术，我们居然也能自己动手制作图片。除了能看图、画图之外，还能用JavaScript玩转图片。想要将图片传到服务器后台？别担心，Canvas还有个神奇的toDataURL()函数，轻轻一点，你的图片马上就会变成base64编码的字符串，轻松传递过去。另外，使用Canvas上传大批量图片简直飞快，再也不需要为大小调整和格式转换而烦恼了！

File API读取用户磁盘文件

HTML5里面有个File API小玩意儿，能直接读你电脑里的图片，来当作图像来源喔。这个工具可是很安全的，完全不会动你重要资料的。

实现拖拽上传

// 加载 图像文件(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); 
};

别假装不懂！现在传文件不用输入网址！直接把文件拉到想去的地方，系统会帮忙上传滴。这功能就像你的私人助理，贴心又实用！上传完毕后，简单拖动文件就搞定，瞬间完成！就能轻轻松松地上网了，实在是太方便了！真是让上网变得更爽了呢～

构建用户界面与控制图片大小

做个用户界面设计，让你们的网站看起来美美的，用得舒心顺畅。知道怎么方便地上传吗？知道怎么调整图片大小吗？只要UI搭配得刚刚好，操作快速简洁，就能感受到上传体验的提升了！保证每个图片都是完美的！

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); 
};

服务器端数据处理

搞定之后，上传服务器，然后就是写个简单处理脚本来处理那些数据，用不着”enctype=multipart/form-data”。然后把收到的图片数据交给后台程序处理，具体怎么搞，看自己需求呗~

// 译者并不懂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版 
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); 
} 
}); 
};

。