Diretório de artigos
prefácio
O miniaplicativo faz upload de fotos, ou tira fotos e faz upload de fotos, e vem com um método compatível com o H5 de upload e compactação de fotos.
1. Suporte para seleção de álbuns e tirar fotos
Ele suporta selecionar álbuns e tirar fotos. Você pode usar a API fornecida pelo uniapp. Claro, você também pode empacotar o estilo que deseja sozinho. Aqui eu uso diretamente o método de uni. uni.chooseImageconfiguraçãosourceType: ['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)
}
},
As imagens compactadas usam principalmente a API 1 e uni.createCanvasContext fornecidas pela tela para criar um contexto de desenho da tela.
2. CanvasContext.drawImage desenha a imagem na tela.
3. CanvasContext.draw desenha a descrição anterior (caminho, deformação, estilo) no contexto do desenho para a tela.
4. Quando a tela for desenhada, exporte a tela como uma imagem, exporte o conteúdo da área especificada da tela atual para gerar uma imagem do tamanho especificado e retorne o caminho do arquivo. 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)
}
})
})
},
Use o tamanho da imagem retornada para controlar a taxa de compactação e execute a função de compactação repetidamente.
//返回图片大小
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)
}
}
},
Dicas: Porque as imagens desenhadas no Canvas no lado H5 precisam suportar o acesso entre domínios para serem bem-sucedidas. Portanto, uni.canvasToTempFilePath no final h5 retornará vazio, então você precisa usar toBlob para convertê-lo em um arquivo e, em seguida, usar createObjectURL para convertê-lo em um URL, para que você possa obter as informações da imagem. Controla a taxa de compressão.
// 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)
}
},
});
});
}
});
})
},
2. Excluir fotos
A função delete é muito simples, basta usar o método delete do lado do array diretamente splice.
deleteSelectImg(index) {
this.tempImageList.splice(index, 1)
},
3. Renderização
Quanto à estrutura da interface do usuário da página, não vou colá-la aqui e você pode implementá-la de acordo com suas reais necessidades.
Há um problema
Ainda existem alguns defeitos no controle da taxa de compactação e não resolve perfeitamente o problema de compactar imagens de um tamanho especificado.
Se você tiver alguma dúvida, por favor, indique...