前言
小程序上传图片，或者拍照上传图片，并附带兼容H5上传图片方法，压缩图片。
一、支持相册选择和拍照
支持选择相册和拍照，可以使用uniapp提供的api，当然也可以自己去封装自己想要的样式，我这里直接是使用了uni的方法。uni.chooseImage配置sourceType: ['album', 'camera']
openSelectImage() {
let tempList = []
uni.chooseImage({
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
if (res.tempFilePaths?.length > 0) {
tempList = res.tempFilePaths
// #ifdef MP
this.recursionCompressMP(tempList, (e) => {
console.log('压缩后结果-----', e)
})
// #endif
// #ifdef H5
this.recursionCompressH5(tempList, (e) => {
console.log('压缩后结果-----', e)
})
// #endif
}
},
fail: (err) => {
console.log("err: ------", err);
}
})
}
// 微信
async recursionCompressMP(urlList, callback) {
let imgCompressList = []
let imageSize = 0
for (let itemUrl of urlList) {
const result = await this.jumpImageCompress(itemUrl)
if (result?.size < 150000) {
this.tempImageList.push(itemUrl)
continue
}
await this.getUserImageCompress(itemUrl, callback, result?.size)
}
},
压缩图片主要用canvas提供的api
1、uni.createCanvasContext 创建 canvas 绘图上下文。
2、CanvasContext.drawImage 绘制图像到画布。
3、CanvasContext.draw将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
4、当canvas绘制完成后，将canvas导出成为图片，把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。uni.canvasToTempFilePath
//微信压缩图片
getUserImageCompress(itemUrl, callback, size){
let that = this;
return new Promise ((resolve, reject)=>{
uni.getImageInfo({
src: itemUrl,
success: (res) => {
//获取设备像素比，不获取最后图片展示有问题
uni.getSystemInfo({
success: function(info) {
let ratio = 2;
let canvasWidth = res.width //图片原始长宽
let canvasHeight = res.height
let compressWidth = res.width
let quality = 0.1
compressWidth = res.width - 120
canvasHeight = res.height - 120
while (canvasWidth > compressWidth || canvasHeight > canvasHeight) { // 保证宽高在400以内
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
that.canvasWidth = canvasWidth
that.canvasHeight = canvasHeight
let ctx = uni.createCanvasContext('mycanvas')
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
ctx.draw(false, setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
destWidth: canvasWidth,
destHeight: canvasHeight,
fileType: 'jpg',
quality: quality,
success: function(res1) {
callback && callback(res1.tempFilePath) //拿到图片压缩后的临时路径
uni.getFileInfo({
filePath: res1.tempFilePath,
success: (ress) => {
console.log('压缩之后----',ress) //返回图片尺寸
callback && callback(res1.tempFilePath)
console.log('添加数据----', that.tempImageList)
resolve(res1.tempFilePath)
that.tempImageList.push(res1.tempFilePath)
}
})
},
fail: function(res) {
console.log('canvas错误---',res.errMsg)
}
})
}, 100)) //留一定的时间绘制canvas
}
})
},
fail: (e) => {
console.log('错误----', e)
}
})
})
},
利用返回的图片大小去控制压缩的比例，重复执行压缩函数。
//返回图片大小
jumpImageCompress (itemUrl) {
return new Promise((resolve, reject)=>{
uni.getFileInfo({
filePath: itemUrl,
success: (res) => {
console.log('压缩之前图片大小----',res) //返回图片尺寸
resolve(res)
},
fail: (err) =>{
reject(err)
}
})
})
},
//h5
recursionCompressH5(url, callback) {
if (typeof url === 'string') {
this.getUserImageCompressH5(url,callback)
} else if (typeof url === 'object') {
for (let itemImg of url) {
this.getUserImageCompressH5(itemImg,callback)
}
}
},
Tips：因为H5端 Canvas 内绘制的图像需要支持跨域访问才能成功。所以h5端uni.canvasToTempFilePath会返回为空，所以需要使用toBlob转为文件，再利用createObjectURL转为url，这样就可以获取到图片信息。控制压缩比例。
// h5压缩图片
getUserImageCompressH5 (imgUrl,callback) {
let that = this;
return new Promise((resolve, reject)=>{
uni.getImageInfo({
src: imgUrl,
success(res) {
let canvasWidth = res.width; //图片原始长宽
let canvasHeight = res.height;
let img = new Image();
img.src = res.path;
console.log(5435435353)
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = canvasWidth / 2;
canvas.height = canvasHeight / 2;
ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2);
canvas.toBlob(function(fileSrc) {
let imgSrc = window.URL.createObjectURL(fileSrc);
uni.getFileInfo({
filePath: imgSrc,
success: (resFileInfo) => {
if (resFileInfo.size > 150000) {
//压缩后大于1M就继续压缩
that.recursionCompressH5(imgSrc, callback);
return;
} else {
callback && callback(imgSrc)
resolve(imgSrc)
that.tempImageList.push(imgSrc)
}
},
});
});
}
});
})
},
二、删除图片
删除功能很简单，直接使用数组方的删除方法splice就可以了。
deleteSelectImg(index) {
this.tempImageList.splice(index, 1)
},
三、效果图
至于页面ui结构，这里就不粘贴了，可以根据自己实际需求去实现。
文章来源：https://www.toymoban.com/news/detail-551240.html
存在问题
在控制压缩比例的地方，还有一些缺陷，并没有很完美的解决压缩指定大小图片问题。
如有问题欢迎指出…文章来源地址https://www.toymoban.com/news/detail-551240.html
到了这里，关于uniapp实现小程序打开相册或拍照上传图片附赠兼容H5方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
