Problemas y soluciones:
Quejarse de los problemas encontrados ~
Al escribir un subprograma de WeChat, cuando uso wx.canvasToTempFilePath para comprimir imágenes y cargarlas, todo es normal en Android y todo es normal en mis herramientas de desarrollo. Sin embargo, no es normal en iOS. La anormalidad no significa que la compresión falla, pero obviamente no funciona. La compresión fue exitosa, pero no pudo enviar solicitudes de red, lo cual fue indignante. Debido a que SM2 cifrará los parámetros de entrada de todas las solicitudes, si desea iniciar una solicitud después de que la compresión de ios sea exitosa, quedará atrapado en el paso de cifrado. No podrá ejecutar el siguiente método de solicitud. No hay problema al imprimir Saqué los parámetros antes del cifrado, pero está atascado. No fui más allá, así que no inicié ninguna solicitud, metafísica. Lo que es aún más misterioso es que el año pasado no hubo ningún problema con iOS y el código no se tocó, pero ahora no funciona con iOS. Después de la investigación, wx.canvasToTempFilePath agregó dos atributos, destWidth y destHeight, y las definiciones fueron exitosas. Es extraño que sean atributos no obligatorios. No completé los atributos predeterminados en Android y estuvo bien. Al final, No estoy seguro de si este es el problema, porque también se ha cambiado otra lógica, pero ahora todo es normal. Hay tantos problemas extraños con iOS que estoy mareado.
El código de compresión de hoy es el siguiente (la imagen se puede girar hacia la izquierda cuando el ancho es mayor que el alto):
wx.createCanvasContext('attendCanvasId') sigue diciendo que está obsoleto, pero no lo cambiaré después de usarlo antes, y es problemático cambiarlo. Lo principal es que también se puede usar:
picCompress(img, width = 600, size = 102, moreCallback) {
let that = this
let imgSize = img.tempFiles[0].size / 1024
console.log('img', img)
let path = img.tempFiles[0].path
console.log('图片大小(kb)', imgSize);
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: img.tempFilePaths[0],
success: function (imgInfo) {
console.log('获取图片信息', imgInfo)
let ctx = wx.createCanvasContext('attendCanvasId');
/**
* 压缩图片：
* 图片宽度大于 width 的时候压缩，小于的时候不操作
*/
if (imgInfo.width > width) {
var canvasWidth = width;
var canvasHeight = (width * imgInfo.height) / imgInfo.width;
//设置canvas尺寸
that.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
});
//将图片填充在canvas上
if (canvasWidth < canvasHeight) {
//顺时针旋转270度
that.setData({
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
})
console.log('宽高：',canvasWidth,canvasHeight)
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
}else {
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
}
// ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, () => {
//下载canvas图片
//保存临时文件
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res) {
console.log(res.tempFilePath)
wx.getImageInfo({
src: res.tempFilePath,
success: function (res) {
console.log('---------------1')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
let t = {
tempFilePaths:res.path, picBase64:sourcePhoto}
resolve(t)
}
});
},
fail: function (error) {
console.log(error)
}
})
}, 500)
})
} else if (imgSize > size) {
// 宽度小于width 但是大小大于size 不压尺寸压质量
var canvasWidth = imgInfo.width;
var canvasHeight = imgInfo.height;
//设置canvas尺寸
that.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
});
//将图片填充在canvas上
if (canvasWidth < canvasHeight) {
//顺时针旋转270度
that.setData({
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
})
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
}else {
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
}
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res) {
console.log(res.tempFilePath)
wx.getImageInfo({
src: res.tempFilePath,
success: function (res) {
console.log('---------------2')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
// moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
let t = {
tempFilePaths:res.path, picBase64:sourcePhoto}
resolve(t)
}
});
},
fail: function (error) {
console.log(error)
}
})
}, 500)
//下载canvas图片
});
} else {
let canvasWidth = imgInfo.width
let canvasHeight = imgInfo.height
console.log('宽高：',canvasWidth,canvasHeight)
//将图片填充在canvas上
if (canvasWidth < canvasHeight) {
//顺时针旋转270度
that.setData({
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
})
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
}else {
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
}
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res) {
console.log(res.tempFilePath)
wx.getImageInfo({
src: res.tempFilePath,
success: function (res) {
console.log('---------------3')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
// moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
let t = {
tempFilePaths:res.path, picBase64:sourcePhoto}
resolve(t)
}
});
},
fail: function (error) {
console.log(error)
}
})
}, 500)
});
}
},
fail: function (getInfoErr) {
that.data.loading.clear()
console.log(getInfoErr)
// wx.hideLoading();
wx.showToast({
title: '获取图片信息失败',
icon: 'error',
duration: 2000
});
}
})
})
},
Una vez que la compresión es exitosa, la imagen se convierte directamente a base64, luego se devuelve directamente un resultado de promesa y se inicia la solicitud después de la operación.
let t = _this.picCompress(res, 600, 100) .then(res => {
// 请求
})
886~
Dirección de almacén de My Bilibili Space Gitee: Código fuente de todos los efectos especiales
Otros artículos:
~ Sígueme para ver efectos especiales creativos más simples:
efecto de humo de texto html+css+js
reflexión envolvente cargando efecto especial html+css
fondo flotante de burbuja efecto especial html+css
simple Reloj efecto especial html+css+js
botón estilo cyberpunk html+css
imitación NetEase Cloud sitio web oficial imagen de carrusel html+css+js
animación de carga de onda de agua html+css
barra de navegación efecto degradado de desplazamiento html+css+js
cambio de página del libro html+css
Álbum de fotos tridimensional 3D html+css
efecto de tablero de dibujo de neón html+css+js
nota algún resumen de atributos css (1)
Nota resumida de Sass
... espera y
ve a mi página de inicio para ver más ~