h5在安卓手机上获取图片宽高缩小了16倍
做了一个移动端预览、上传图片的功能,但是在安卓手机发现上传的图片压缩厉害,查了下发现是获取的图片宽高异常(是原图的1/16),导致drawImage时图片被压缩,代码中并没有对宽高修改,百思不解,贴上代码,各位大大看下是什么原因,多谢!!
更新1:
已验证ios下正常,android下拍照上传也是正常,只有选择图片上传会被压缩严重。检查上传代码感觉应该没有问题,会不会是android容器有什么异常,实在想不出其他原因,还望各位大大不吝赐教。
更新2:
引入localResizeIMG解决了这个问题,但是没有找到bug的根源,希望有遇到相同问题的朋友可以一起探讨
// 预览并上传图片
previewImg: function(file, imgArr){
var self = this;
var URL = window.URL || window.webkitURL;
var rFilter = /^(?:image\/gif|image\/jpeg|image\/png)$/i;
// 判断上传文件类型
if(!rFilter.test(file.type)){
showTipMsg('请上传图片!');
return;
}
var fileUrl = URL.createObjectURL(file);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function(){
var w = image.width;
var h = image.height;
// 按@wolfx提示,限制宽高,不进行压缩
if(w > 1000 && w > h){
h = h*1000/w;
w = 1000;
}
if(h > 1000 && h > w){
w = w*1000/h;
h = 1000;
}
canvas.width = w;
canvas.height = h;
ctx.drawImage(image,0,0,w,h);
var dataUrl = canvas.toDataURL("image/jpeg");
// 上传base64图片
self.uploadDataBase64(dataUrl, imgArr);
};
image.src = fileUrl;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
scale的倍数,和文件大小不是线性关系啊,怎么可以用文件大小比例去作为缩放比呢。。。
我觉得设置一个最大宽,凡是大于这个宽的,强制压缩到最大宽就行了。
问题已经解决,自问自答下
使用了localResizeIMG插件解决了以上问题,阅读了localResizeIMG的源码,但是还是没找到bug的根源在哪