基于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);

源代码转自--http://git.oschina.net/opmetic/xxUploadImg