javascript使用canvas压缩图像
javascript使用HTML5 canvas对象，在客户端压缩图片后上传到服务器。ajax发送canvas压缩后的base64图片字符串内容到服务器，服务器将base64内容转为2进制数据保存为图片即可。
效果如下，左边是原始图片，右边是压缩后的。
javascript使用canvas压缩图像源代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>javascript使用canvas压缩图像</title>
<script type="text/javascript">
var jic = {//javascript使用HTML5 canvas压缩图像源代码，压缩js代码来源：http://www.gbtags.com/gb/share/2991.htm，做了些许更改
/**
* Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed 使用canvas压缩图片，返回图片压缩后的base64字符串内容
* @param {Image} source_img_obj The source Image Object 被压缩的图片对象，注意图片对象一定要加载当前压缩的图片base64内容，要不会报错
* @param {Integer} quality The output quality of Image Object 压缩比，越小压缩越多
* @return {string} compressData The compressed Image base64 string 图像压缩后的base64编码字符串
*/
compress: function (source_img_obj, quality, output_format) {
var mime_type = "image/jpeg";
if (output_format == "png") mime_type = "image/png";
var canvas = document.createElement('canvas');
//naturalWidth真实图片的宽度
canvas.width = source_img_obj.naturalWidth;
canvas.height = source_img_obj.naturalHeight;
var ctx = canvas.getContext("2d").drawImage(source_img_obj, 0, 0);
var compressData = canvas.toDataURL(mime_type, quality / 100);
return compressData;
}
}
</script>
</head>
<body><input type="file" onchange="compressImage(this.files[0])"/>
<div id="dvRst"></div>
<img id="imgSource" alt="原始图片"/>
<img id="imgCompress" alt="HTML5 Canvas压缩后的图片"/>
<script>
function compressImage(file) {
if (!file || file.type.indexOf('image') != 0) return; //没有选中文件或者不是图片退出处理函数
var reader = new FileReader();
reader.onload = function (event) {
var imgCompress = document.getElementById('imgCompress'), imgSource = document.getElementById('imgSource');
imgCompress.src = imgSource.src = event.target.result;
//firefox12测试时发现不延时设置压缩数据，可能会无法获取到压缩数据，chrome测试没有问题。
setTimeout(function () {
var quality = 30; //图像压缩比，越小压缩越多
imgCompress.src = jic.compress(imgCompress, quality); //压缩图像后重新设置内容
document.getElementById('dvRst').innerHTML = '压缩前大小：' + imgSource.src.length + '<br/>压缩后大小：' + imgCompress.src.length;
//ajax发送imgCompress.src内容到服务器，服务器将base64内容转为2进制数据保存为图片即可。
}, 10);
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：javascript使用canvas压缩图像