我将拍照文件图片预上传到阿里云的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),不需要额外的资源文件。
龙祖
plus.camera.getCamera() 在PAD拍照完成之后app刷新
2018-07-26 17:39
龙祖
求个解决办法,是不是现在忙着打官司,没时间修改bug了
2018-07-26 17:40