HTML5 Canvas 实现本地压缩图片

canvas压缩本地图片。

<span style="font-size:18px;"><span style="font-size:18px;">document.getElementById("myImg").οnlοad=function(){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var img=document.getElementById("myImg");
  ctx.drawImage(img,0,0,img.width,img.height,0,0,100,100);<!-- 原图等比例压缩为100*100-->
};</span></span>

插件：http://www.cnblogs.com/xiao-yao/p/3608223.html

<span style="font-size:18px;">/*common*/
/**
 * canvas图片压缩
 * @param  {[Object]} opt [配置参数]
 * @param  {[Function]} cbk [回调函数]
 * @return {[Void]}
 * example:
 * var opt = {
    'type' : 1,//为1为预览，建议不为1或后期进行改进
    'file' : "#loadFile"//文件上传控件
},_compress = require('app/compress');
_compress(opt,function (result) {
    console.log(result)
});
 */
function writeDom (opt,cbk) {
    var _opt = opt,
        _cbk = cbk;
    $('#img,#_canvas,#img-c').remove();
    $('body').append($('<canvas id="_canvas" style="display: none;"></canvas><img id="img-c" src="" style="display:none;"/><img id="img" src="" style="width:300px;"/>'));
    _image = new Image();
    _image.src = _opt.src || "";
    $('#img-c').attr('src',_opt.src)[0].onload = function(){
        var _this = $(this);
        var _canvas=document.getElementById('_canvas');
        _canvas.width = _this.width();
        _canvas.height = _this.height();
        var _context=_canvas.getContext('2d');
        _context.drawImage(_image,0,0);
        if (_opt.type) {$('#img').attr('src',_canvas.toDataURL('image/jpeg',_opt.scale));};
        _cbk(_canvas.toDataURL('image/jpeg',_opt.scale));
    };
}
var result = '';
return function(opt,cbk){
    var _opt = {
        'type' : opt.type || 0,
        'file' : opt.file ? $(opt.file) : $("#loadFile")
    },
    _file = _opt.file,
    _cbk = cbk || function(){};
    _file.change(function(){
        var file = $(this)[0].files[0];
        var fReader = new FileReader();
        fReader.readAsDataURL(file);
        fReader.onload = function (e){
            var _num = +prompt('请输入压缩比例');
            if (isNaN(_num)) {_num = 1};
            _opt.scale = _num;
            result = _opt.src = this.result;
            writeDom(_opt,_cbk);
        };
    });
}</span>