h5在安卓手机上获取图片宽高缩小了16倍

发布于 2022-09-05 09:27:24 字数 1366 浏览 33 评论 0

做了一个移动端预览、上传图片的功能,但是在安卓手机发现上传的图片压缩厉害,查了下发现是获取的图片宽高异常(是原图的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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

林空鹿饮溪 2022-09-12 09:27:24

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

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

盛夏尉蓝 2022-09-12 09:27:24

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文