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;
}
阅读 3.3k
2 个回答

scale的倍数,和文件大小不是线性关系啊,怎么可以用文件大小比例去作为缩放比呢。。。

我觉得设置一个最大宽,凡是大于这个宽的,强制压缩到最大宽就行了。

问题已经解决,自问自答下
使用了localResizeIMG插件解决了以上问题,阅读了localResizeIMG的源码,但是还是没找到bug的根源在哪

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题