微信小程序使用RenderingContext进行图片尺寸压缩

现在手机摄像头的像素越来越高，把很高像素的照片上传腾讯人脸识别，会发生超时错误，并且消耗了更多的网络流量。通常业务场景要上传的图片，像素要求也没那么高。

目前compressimage只实现了压缩算法的压缩质量调整，并没有改变图片的尺寸，因此，压缩也有限。

在网上查了相关文章，大部分基于老的CanvasContext处理的，现在小程序已经不支持了。

由于对前端程序没什么经验，只有不断问度娘和尝试，终于实现了图片尺寸压缩，分享给大家。

在尝试中发现关键点是，图像的物理像素和逻辑像素的关系，有的使用的逻辑像素，有点使用的物理像素。

具体处理如下：

首先在页面上建一个看不见的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编码就可以了;

}

})

微信小程序使用RenderingContext进行图片尺寸压缩相关推荐

微信小程序分享接口卡片图片尺寸比例
调用微信小程序分享需要button标签 <button open-type="share">test</button> 然后在js的page里加一个函数 o ...
小程序源码：强大的多功能图片处理器微信小程序源码下载图片画框合成-多玩法安装简单
大家好这是以开以图片为主题的一款小程序里面拥有了多种的图片处理功能,也算是比较强大的一款另外小编最喜欢的就是里面的图片画框合成这个功能该功能里面有N种画框模板,然后画框的尺寸根据您的图片自适应处 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
微信小程序：多功能图片处理器
这是一款多功能的一款照片处理器 UI简洁,功能也还不错免除服务器和域名即可搭建,特别的简单好上手一键化功能支持: 人脸融合(人脸融合,两张脸融合成一张) 换底色(相当于就是给照片的底色换色,一般都 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...

微信小程序使用RenderingContext进行图片尺寸压缩

微信小程序使用RenderingContext进行图片尺寸压缩相关推荐

最新文章

热门文章