前端js压缩图片

Question

 document.getElementById("myCanvas").toDataURL("image/jpeg",0.1);
为什么降低图片质量   图片的内存还是没有变小

Answer 1

todataurl 还有第二个参数，图片质量，默认0.92

Answer 2

//添加img和canvas标签,一个用于存放原图片，一个用于drawImage并获取压缩后的数据
<canvas id="canvas" style="display: none;"></canvas>
<img id="source" src="" style="display: none;"> 
function gallery_get_base64(files)//参数：原图片的地址[数组]，该地址可以通过gallery.pick返回或camera.captureImage中的success回调函数获得
                {
                    var cur_file=files.pop();//注意*压缩过程中，因为传入的是图片路径数组，必须用递归方式去压缩，否则如果通过for循环的话，还未压缩完成一张，for循环已经结束，最终只会得到最后一张图片
                plus.nativeUI.showWaiting('加载中');
                var canvas,source,dataUrl;  
                     canvas = document.getElementById('canvas');
 source = document.getElementById('source');
 dataUrl;//存储画在画布上的数据
source.onload=function(){//当原图片加载好时触发    var width = source.width;
    var height = source.height;
    var context = canvas.getContext('2d');    // draw image params
    var sx = 0;
    var sy = 0;
    var sWidth = width;
    var sHeight = height;
    var dx = 0;
    var dy = 0;
    var dWidth = width;
    var dHeight = height;
    var quality = 0.2;//图片的质量范围为0-1,设置成0.2的话3M图片大概能压缩成250-290k左右    canvas.width = width;
    canvas.height = height;/*
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数  描述
img 规定要使用的图像、画布或视频。
sx  可选。开始剪切的 x 坐标位置。
sy  可选。开始剪切的 y 坐标位置。
swidth  可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x   在画布上放置图像的 x 坐标位置。
y   在画布上放置图像的 y 坐标位置。
width   可选。要使用的图像的宽度。（伸展或缩小图像）
height  可选。要使用的图像的高度。（伸展或缩小图像）
*/    context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
/*
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。如果画布的高度或宽度是0，那么会返回字符串“data:,”。
如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
Chrome支持“image/webp”类型。
语法
canvas.toDataURL(type, encoderOptions);
参数type 可选
图片格式，默认为 image/png
encoderOptions 可选
在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
返回值包含 data URI 的DOMString。
*/
     dataUrl = canvas.toDataURL('image/jpeg', quality); //此处第二个参数为0.2，这样裁剪后只有两三百K
    console.log(dataUrl);
    $('#images_show ul').append('<li><img width="88px" height="88px" src="' + dataUrl + '"/></li>');    if(files.length>0)
    {
        // 递归，否则无法全部压缩
        gallery_get_base64(files);
    }
    else{        plus.nativeUI.closeWaiting();    }}
    source.src=cur_file;                }

Answer 3

上面是我文章的部分内容，可能直接看有点混乱，链接：http://blog.csdn.net/a250758092/article/details/74010976