js 图片等比压缩并保留清新度

function drawOnCanvas(file) {
    $.mobile.loading('show', {
        text: '图片上传中,请耐心等待...', //加载器中显示的文字
        textVisible: true, //是否显示文字
        theme: 'a',        //加载器主题样式a-e
        textonly: false,   //是否只显示文字
        html: "<div style=\"width:200px;\" align=\"center\"><img src=\"../assets/img/l1.gif\" /></div>"           //要显示的html内容，如图片等
    });

    var reader = new FileReader();

    reader.onload = function (e) {
        var dataURL = e.target.result,
            canvas = document.getElementById('canvas'),
            img = new Image(),
            context = canvas.getContext('2d');
        img.onload = function () {
            var size = 300;
            canvas.style.width = size + "px";
            canvas.style.height = size + "px";

            var scale = 3.125;
            canvas.width = Math.floor(size * scale);
            canvas.height = Math.floor(size * scale);

            context.scale(scale, scale);
            context.clearRect(0, 0, size, size);
            context.drawImage(this, 0, 0, size, size);
//            /*  canvas.toDataURL(type, args)
//              该方法能够将canvas转换为图像，图像是基于Base64编码的。如
//              果不指定两个参数，无参数调用该方法，转换的图像格式为png格式
//。
//              •type:指定要转换的图像格式，如 image/png、image/jpeg等。
//              •args:可选参数。例如，如果type为image/jpeg，则args可以是
//              0.0和0.1之间的值，以指定图像的品质。
//例如，下面的代码将canvas中已绘制的内容在一个新的浏览器窗
//              口或选项卡中打开：
            
            var base64 = canvas.toDataURL('image/jpeg');

            $('#s').html(base64);

            //隐藏加载器
            $.mobile.loading('hide');
        };
        img.src = dataURL;  //把图像给img对象，在img 对象onload事件中进行绘制到canvas（相关压缩，保存，都可以在这里进行操作）
    };
    reader.readAsDataURL(file);
};
function change() {
    var input = document.getElementById('cameraInput')
    var file = input.files[0]; drawOnCanvas(file);
};

标签：canvas,scale,img,压缩,js,context,var,清新,size
来源： https://www.cnblogs.com/Nina-piaoye/p/14269006.html