JS将图片压缩为指定尺寸

  JS将图片压缩为指定尺寸,并且压缩图片质量,JS将图片压缩为指定尺寸并且保存示例如下(IE不支持data协议,无法直接保存)

<img src="11.png" id="img" onload="aDL.href = imgCompress.src = compressImg(100, 100, 70, img);" /><br />
<img id="imgCompress" />
<a id="aDL" href="" download="compress.jpg">保存压缩后图片</a>
<script>
    /*canvas压缩图片,图片不能跨域
    *width:压缩后宽度
    *height:压缩后高度
    *rate:压缩比率,1~100,越小压缩比率越大
    *img:img dom对象
    */
    function compressImg(width, height, rate, img) {
        var canvas = document.createElement('canvas'), c = canvas.getContext('2d');
        canvas.width = width; canvas.height=height;
        c.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height);
        return canvas.toDataURL('image/jpeg', rate / 100);//返回base64,如果要服务器保存发送这个base64到服务器,将base64转2进制保存即可
    }
</script>

  使用此函数结合HTML5的File API,可以将用户数码相机拍摄的大照片先压缩后再发送到服务器端,减少网络传输,节省服务器端磁盘空间。

javascript客户端图片预览

HTML5 FileReader对象API,FileReader使用文档

 


原创文章,转载请注明出处:JS将图片压缩为指定尺寸

评论(0)Web开发网
阅读(151)喜欢(0)JavaScript/Ajax开发技巧