完善上传图片用canvas压缩_eval (dom.js?5924:19)-CSDN博客

本文链接：https://blog.csdn.net/Lschange/article/details/78844301

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="headImg clearfix">
<div class="picturesBox">
<div class="pictures">
<input type="file" id="J_file" accept="image/*">
<img src="" alt="">
</div>
</div>
</div>
<script type="text/javascript">
var higoodthingsdata = {
updateimg: {}
}
var J_file = document.getElementById('J_file');//上传文件的input；
var J_look = document.getElementById('J_look');//显示图片;
J_file.οnchange=function(){
var imgFile = this.files[0];
var img = new Image();
var fr = new FileReader();
fr.readAsDataURL(imgFile);
fr.οnlοad=function(){
img.src = this.result;
img.onload = function() {
var data = higoodthingsdata.updateimg;
data.img = img;
var base64 = imageData(data);
//下面两行任选一行
$('.pictures img').attr('src',base64);//展示压缩后的图片
// $('.showimg img').attr('src',img.src);//展示没有压缩的原图
updateimgs(base64)
}
};
};
function updateimgs(aaa) {
$.ajax({
type: 'POST',
url: '${pageContext.request.contextPath}/issue/updatehead',
data: {
'image': aaa
},
success: function(data) {
console.log(data);
}
})
}
/*使用canvas压缩图片并且返回压缩后的base64编码值*/
function imageData(obj) {
var canvas = document.createElement('canvas');
var w = 70;
var h = 70;
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(obj.img, 0, 0, obj.img.width, obj.img.height, 0, 0,w,h);//画出图像
return canvas.toDataURL("image/jpg");//返回base64编码
};
</script>
</body>
</html>