验证中...
语言: JavaScript
分类: Web开发技术
最后更新于 2018-12-09 10:33
压缩图片js
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="" alt="" id="img1"/>
<input class="hide_input" type="file" name="imageFiles" id="img" onchange="showimg(this,'#img1')"/>
<script src="jquery-2.0.0.min.js"></script>
<script>
function showimg(inputId,imgId) {
var file =inputId.files[0];//获取input file控件选择的文件
ImgToBase64(file, 450, function (base64) {
$(imgId)[0].src = base64;//预览页面上预留一个img元素,载入base64
});
}
function ImgToBase64(file, maxLen, callBack) {
var img = new Image();
var reader = new FileReader();//读取客户端上的文件
reader.onload = function () {
var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload,
img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
};
img.onload = function () {
//生成比例
var width = img.width, height = img.height;
//计算缩放比例
var rate = 1;
if (width >= height) {
if (width > maxLen) {
rate = maxLen / width;
}
} else {
if (height > maxLen) {
rate = maxLen / height;
}
};
img.width = width * rate;
img.height = height * rate;
//生成canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var base64 = canvas.toDataURL('image/jpeg', 0.9);
callBack(base64);
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助

14_float_left_people 14_float_left_close