阿余
阿余
  • 发布:2016-06-27 16:15
  • 更新:2016-08-26 15:17
  • 阅读:3617

【报Bug】拍照时不能指定分辨率的问题

分类:HTML5+

我将拍照文件图片预上传到阿里云的OSS服务器上,我不希望图片文件太大,想通过减小分辨率减小文件大小的目的,原想通过在拍照时设置分辨率,我搜索了关于这个拍照设置分辨率的问题,发现H5+没有提供。

我尝试通过plus.zip.compressImage达成目的,经测试发现通过本地压缩的方式不可行,我的测试方案如下:
拍照后的图片分辨率是:2448x3164,大小为1M,我尝试压缩到1920x1920(虽然我的目的按长边缩至1920,短边等比收缩,但API不支持),为了减少精度损失,品质我选择了100,结果压缩后的大小为3M,越压体积越大,不符合我进行压缩的初衷,虽然我能理解体积变量的原因,毕竟我选择了品质100。那目前来看最靠谱的方式在拍照的源头解决问题,就是在拍照时指定好拍照的分辨率,这样可以在尽可能的保障精度的情况下减小文件的体积,可是拍照的API没有支持指定分辨率拍照,但可以获取摄像头所能支持的拍照分辨率列表(API地址),那么图片压缩的API有显得鸡肋的感觉,而获取摄像头所能支持的拍照分辨率列表的API(Camera的supportedImageResolutions属性)也就感觉没有什么用,也即有功能,但不能解决实际问题。

请技术团队确认这是否为产品的缺陷或功能遗憾,期盼能及时完善!

环境:手机MI2 系统MIUI8(android 5.0.2)

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <script type="text/javascript">  
            /**  
             * 通过相机捕获图片  
             * @param res 0 小最分辨率 1 最大分辨率  
             */  
            captureCameraImage = function(res) {  

                // 如果H5+没有准备好,则直接返回  
                if (!window.plus) return;  

                // 打开摄像头  
                var camera = plus.camera.getCamera();  

                // 设置拍照分辨率  
                var resolution;  
                if (res == 1) {  
                    resolution = camera.supportedImageResolutions[0];  
                } else {  
                    resolution = camera.supportedImageResolutions[camera.supportedImageResolutions.length-1];  
                }  

//              // 交换宽高  
//              var r = resolution.split("*");  
//              resolution = r[1] + "*" + r[0];  
                console.log("拍照分辨率:" + resolution)  

                // 列出摄像拍照所支持的所有分辨列表  
                for (var i = 0; i < camera.supportedImageResolutions.length; i++) {  
                    console.log(camera.supportedImageResolutions[i]);  
                }  

                // 处理捕获图片事件  
                camera.captureImage(function(filePath) {  
                    plus.io.resolveLocalFileSystemURL(filePath, function(entry) {  
                        // 获取文件大小  
                        entry.getMetadata(function(metadata){  
                            console.log("文件大小:" + metadata.size);  
                        }, function(e) {  
                            console.log("获取文件信息失败:" + e.message);  
                        }, false);  

                        // 可通过entry对象操作拍照文件  
                        entry.file(function(file){  
                            var fileReader = new plus.io.FileReader();  
                            fileReader.onprogress = function(evt) {  
                                console.log(evt);  
                            };  
                            fileReader.onloadend = function(evt) {  
                                // 显示拍照的图片  
                                var div = document.getElementById("" + res);  
                                div.innerHTML = "";  

                                var img = document.createElement("img");  
                                img.onload = function() {  
                                    // 先获取图片的物理分辨率  
                                    div.querySelector("div").innerHTML = "照片分辨率:" + this.width + "*" + this.height;  
                                    // 后将图片的显示大小设置300宽,高度等比缩放  
                                    this.width = 300;  
                                }  
                                div.appendChild(img);  
                                div.appendChild(document.createElement("div"));  
                                // 显示图片  
                                img.src = evt.target.result;  
                            };  
                            fileReader.readAsDataURL(file, 'utf-8');  
                        });  

                    }, function(e) {  
                        console.log("读取拍照文件错误:" + e.message);  
                    });  
                    console.log(filePath);  
                }, function(s) {  
                    console.log("error" + s);  
                }, {  
                    filename: "_doc/head_" + res + ".jpg",  
                    resolution: resolution // 指定拍照分辨率  
                })  
            };  
        </script>  
    </head>  
    <body>  
        <button onclick="captureCameraImage(1)">最大分辨拍照</button>  
        <div id="image-1"></div>  
        <br />  
        <button onclick="captureCameraImage(0)">最小分辨拍照</button>  
        <div id="image-0"></div>  
    </body>  
</html>  

附件中的文件可以直接用于测试,将APP的首页指向这个文件即可(camera.html),不需要额外的资源文件。

2016-06-27 16:15 负责人:无 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

  1. 关于拍照分辨率的问题
    5+ API调用的是系统拍照组件,无法支持设置分辨率。

  2. 图片压缩问题
    决定图片压缩后的大是分辨率和图片质量,压缩过程是先将原图解析成bitmap格式图片(24bit),然后按指定的分辨率和图片质量进行压缩,如果设置的分辨率或图片质量大于原图,则很可能会大于原图。实际上应该避免将质量设置为100(设置为100与bmp图片格式基本上没有区别),如果需要进行图片的压缩建议质量值小于50。

  • 龙祖

    plus.camera.getCamera() 在PAD拍照完成之后app刷新

    2018-07-26 17:39

  • 龙祖

    求个解决办法,是不是现在忙着打官司,没时间修改bug了

    2018-07-26 17:40

maq

maq

  1. 拍照后得到 image file。
  2. 用 H5 创建一个 canvas,并设置好分辨率。
  3. 把 image 画到 canvas 里。
  4. 通过 canvas 的接口获得图片数据,再上传。
  • 阿余 (作者)

    这样的话,要么损耗精度,要么达不到需要的体积比(相同分辨率和清晰度下大小更小)

    2016-07-01 14:17

  • 3***@qq.com

    用canvas得到的base64图片如何上传到oss?oss有接受base64的接口吗

    2017-08-15 20:00

WinXP

WinXP

请问是否有上传图片到阿里云oss的demo

  • WinXP

    跪求。405939500@qq.com

    2016-08-26 15:18

该问题目前已经被锁定, 无法添加新回复