基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸

/**
* Created by xx on 15-05-28.
* 基于html5 canvas 的客户端异步上传画片的插件
* 在实际应用中，常常要用于上传图片的功能．在现在越来越多的手机webapp应用中，上传图片功能的问题尤为实出，
* 主要表显为：１　手机摄象头太牛B,随便拍拍，照片都有几Ｍ
* 　　　　　　２　在没有wifi的情况下，移动网络上线照片还是有点慢的
* 解决以上问题，主要的思路还是在客户端压缩图片尺寸，这就用到这个插件了
*
* 插件中的核心代码参照网络，自己整理了一下
*
* 使用方法
* $("#xxfile").xxUploadImg({
url: 'upload.php', //上传服务器url
max: 100, // 上传图片的高或宽(大的那个)的最大值　,当此值为0时，不压缩
fileType: 'image/png', //文件格式: image/png image/jpeg   经测试在微信中 jpeg无效
param: false, //因为上传是异步的，这里是　需要传递的参数　
callbackFun: function (ret, param) { // 上传成功后的回调函数
$("#show_img").attr("src", ret);
}
})
*/

(function ($) {
$.fn.xxUploadImg = function (options) {
if (typeof options == "string") {
options = {"fileId": options};
}
// build main options before element iteration
var opts = $.extend({}, $.fn.xxUploadImg.defaults, options);
return this.each(function () {
var $this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
o.fileObj = $this[0].files[0];

// 获取 canvas DOM 对象
o.canvas = document.getElementById(o.canvasId);
if (!o.canvas) {
o.canvas = document.createElement("canvas");
o.canvas.style.display = "none";
}

// 获取 canvas的 2d 环境对象,
// 可以理解Context是管理员，canvas是房子
o.ctx = o.canvas.getContext("2d");

loadImage(o);
});
}

// 加载 图像文件(url路径)
function loadImage(o) {
//   var src = document.getElementById(o.fileId).files[0];
// 过滤掉 非 image 类型的文件
if (!o.fileObj.type.match(/image.*/)) {
if (window.console) {
console.log("选择的文件类型不是图片: ", o.fileObj.type);
} else {
window.confirm("只能选择图片文件");
}

return;
}

// 创建 FileReader 对象 并调用 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function (e) {
// 调用前面的 render 函数
render(e.target.result, o);
};
// 读取文件内容
reader.readAsDataURL(o.fileObj);
}

// 渲染
function render(src, o) {
// 创建一个 Image 对象
var image = new Image();
// 绑定 load 事件处理器，加载完成后执行
image.onload = function () {

if (o.max > 0) {
if (image.height > image.width) {
// 如果高度超标
if (image.height > o.max) {
// 宽度等比例缩放 *=
image.width *= o.max / image.height;
image.height = o.max;
}
} else {
if (image.width > o.max) {
// 宽度等比例缩放 *=
image.height *= o.max / image.width;
image.width = o.max;
}
}
}

// canvas清屏
o.ctx.clearRect(0, 0, o.canvas.width, o.canvas.height);
// 重置canvas宽高
// 这里是使用canvas一个坑,就是先要给canvas设置宽高,然后才可以调用旋转等操作
o.canvas.width = image.width;
o.canvas.height = image.height;
// 将图像绘制到canvas上
o.ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，image 没有加入到 dom之中

upload(o);
};
// 设置src属性，浏览器会自动加载。
// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src = src;
};

function upload(o) {
//上传
var dataurl = o.canvas.toDataURL(o.fileType);
// 为安全 对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
var imagedata = encodeURIComponent(dataurl);
$.post(o.url,
{
img: dataurl
},
function (ret) {
o.callbackFun(ret, o.param);
})
}

$.fn.xxUploadImg.defaults = {
fileObj: false, //file对象

canvasId: 'xxcanvas', //canvas标签的ID
canvas: false, //canvas标签的ID
ctx: false, //canvas标签的ID

url: '', //上传服务器url
max: 0, //压缩图片尺寸大小
fileType: 'image/png', //文件格式 image/png image/jpeg   经测试在微信中 jpeg无效
param: false, //需要传递的参数
callbackFun: function (ret, param) {
} //回调函数
}
})(jQuery);