<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="jquery-2.1.0.js"></script>
<body>
<img id="img" style="width: 100px;height: 100px;" src="_20181122174603.jpg" />
<div id="canvers"></div>
<img id="dataURL" />
<input type="file" id="demo" />
</body>
<script>
//图片 file canvers 互转换
var ImageConversion={
/*通过一个url加载所需要的图片对象,
其中url参数传入图片的url,
fn为回调方法,包含一个Image对象的参数*/
urltoImage :function (url,fn){
var img = new Image();
img.src = url;
img.onload = function(){
fn(img);
}
},
/*Image对象转变为一个Canvas类型对象,
其中image参数传入一个Image对象*/
imagetoCanvas:function (image){
var cvs = document.createElement("canvas");
var ctx = cvs.getContext('2d');
cvs.width = image.width;
cvs.height = image.height;
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
return cvs ;
},
/*Canvas对象压缩转变为一个dataURL字符串,
其中canvas参数传入一个Canvas对象;
quality参数传入一个0-1的number类型,表示图片压缩质量*/
canvasResizetoDataURL:function (canvas,quality){
return canvas.toDataURL('image/jpeg',quality);
},
/*Canvas对象压缩转变为一个Blob类型对象;
其中canvas参数传入一个Canvas对象;
quality参数传入一个0-1的number类型,表示图片压缩质量;fn为回调方法,包含一个Blob对象的参数*/
canvasResizetoFile:function (canvas,quality,fn){
canvas.toBlob(function(blob) {
fn(blob);
},'image/jpeg',quality);
},
/*File(Blob)类型文件转变为dataURL字符串,
其中 file 参数传入一个File(Blob)类型文件;
fn为回调方法,包含一个dataURL字符串的参数*/
filetoDataURL:function (file,fn){
var reader = new FileReader();
reader.onloadend = function(e){
fn(e.target.result);
};
reader.readAsDataURL(file);
},
/*dataURLtoImage(dataurl,fn) 会将一串dataURL字符串转变为Image类型文件,
其中dataurl参数传入一个dataURL字符串,
fn为回调方法,包含一个Image类型文件的参数*/
dataURLtoImage:function (dataurl,fn){
var img = new Image();
img.onload = function() {
fn(img);
};
img.src = dataurl;
},
/*dataURLtoFile(dataurl) 会将一串dataURL字符串转变为Blob类型对象,
其中dataurl参数传入一个dataURL字符串*/
dataURLtoFile:function (dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
},
/*将一个File对象压缩之后再变为File对象*/
/*将一个File对象压缩之后再变为File对象*/
fileResizetoFile:function (file,quality,fn){
window.ImageConversion.filetoDataURL (file,function(dataurl){
window.ImageConversion.dataURLtoImage(dataurl,function(image){
window.ImageConversion.canvasResizetoFile(window.ImageConversion.imagetoCanvas(image),quality,fn);
})
})
}
/*事例 File图片文件压缩再转成File图片文件
var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
console.log(res);
//拿到res,做出你要上传的操作;
})
*/
}
//图片生成canvers
var cavers=ImageConversion.imagetoCanvas($("#img")[0]);
$("#canvers").append(cavers);
//canvers 转 dataURL
var dataURL=ImageConversion.canvasResizetoDataURL(cavers,1);
$("#dataURL").attr("src",dataURL);
//dataURL 转 File 文件类型
var file=ImageConversion.dataURLtoFile(dataURL);
/*事例 File图片文件压缩再转成File图片文件 方便上传
0->1 图片越来越大
* */
var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.1,function(res){
console.log(res);
//拿到res,做出你要上传的操作;
})
</script>
</html>
如果需要用ajax提交图片的话,接下来的步骤看这里: https://blog.youkuaiyun.com/RSHUEN/article/details/88538238
上边的是自己汇集了下原博客的写了下适应自己的代码
转载文章: https://www.cnblogs.com/wangyulue/articles/7845410.html