现在手机摄像头的像素越来越高,把很高像素的照片上传腾讯人脸识别,会发生超时的错误,并且消耗了更多的网络流量。
通常业务场景要上传的图片,像素要求也没那么高。
目前compressimage只实现了压缩算法的压缩质量调整,并没有改变图片的尺寸,因此,压缩也有限。
希望在takephoto获取的图片,能够直接压缩图片尺寸,而不是送入一个看不见的canvas,去处理。非常麻烦。
现在通过wx.getImageInfo,将拍摄到照片的原始尺寸,送入canvas,drawimage,出来的只是真实图片的一角。送到人脸识别返回没有人脸。
我知道自己对canvas的知识有限,会继续百度解决方案。但是,目前这种处理方式非常非常非常的麻烦,不符合低代码的趋势。
强烈建议提供直接压缩图片尺寸的函数!!!谢谢!
你的反馈我们已收到,我们会进行评估
希望官方能尽快解决这个问题,canvas 压缩图片尺寸,效率真的很低,很影响用户体验
👍🏻
经过不断尝试,终于实现了图片尺寸压缩。
关键点是,图像的物理像素和逻辑像素的关系,有的使用的逻辑像素,有点使用的物理像素。
首先在页面上建一个看不见的canvas:
<canvas type="2d" id="myCanvas" style="width:{{cWidth}}px;height:{{cHeight}}px; position: absolute;left:-1000px;top:-1000px;"></canvas>
处理函数:
compressImg: function (imgFile) { //imgFile欲压缩的图片文件名和路径
var that = this;
console.log("compress start...");
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec(function (res) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
let image = canvas.createImage();
image.src = imgFile;
image.onload = function () {
let styleWidth = image.width; //单位px
let styleHeight = image.height; //单位px
var sizeLimit = 200; //单位px,逻辑像素,欲压缩到的最大边的px数
if (Math.max(styleWidth, styleHeight) > sizeLimit) {
var percent = sizeLimit / Math.max(styleWidth, styleHeight);
styleWidth = Math.trunc(styleWidth * percent)
styleHeight = Math.trunc(styleHeight * percent)
}
const dpr = wx.getSystemInfoSync().pixelRatio; //获取设备像素比,物理像素和逻辑像素的比值
//重点:DrawImage使用的物理像素,canvas的width、height一定要设置,否则,图像会变形。因为系统给的初始值和你图片的比例不一致
canvas.width = styleWidth * dpr;
canvas.height = styleHeight * dpr;
//canvas实际显示的是style中的width和height,单位px
that.setData({
cWidth: styleWidth,
cHeight: styleHeight
});
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
//使用jpeg格式,比png要小一个数量级
let dataURL = canvas.toDataURL("image/jpeg", 0.7);
//自己后续处理,我直接上传base64编码就可以了;
}
})
},
这样效率太低了,压缩时长太久