由于用uniapp中的上传图片的图片太大,上传很慢,所以就采用canvas配合压缩图片的质量大小,很好的解决了图片上传很慢的问题,代码如下
1、用uni.chooseImage从本地相册选择图片,获取到文件的临时路径(如图中imageSrc_)
2、用uni.getImageInfo获取图片信息
getImageInfo(src) { //src传的是之前获取文件的临时地址
let _this = this
uni.getImageInfo({
src,
success(res) {
console.log('压缩前', res)
let canvasWidth = res.width //图片原始长宽
let canvasHeight = res.height
let img = new Image()//建立图像对象
img.src = res.path
// 默认按比例压缩
let canvas = document.createElement('canvas');//创建canvas元素
let ctx = canvas.getContext('2d')//绘制2d图案
canvas.width = canvasWidth / 8 //创建的图片是原始图片的1/8
canvas.height = canvasHeight / 8
ctx.drawImage(img, 0, 0, canvasWidth / 8, canvasHeight / 8)
//第一个参数是要裁剪的图片对象,第二个参数和第三个参数是图片开始裁 剪的起点,第四个和第五 个代表缩放后的大小
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', 0.2);
Console.log(base64) //base64是压缩后的图片地址,然后就可以请求上传图片的地址了(如图下)