Utilice upng.js para convertir la imagen seleccionada por el subprograma a base64
El subprograma tiene una interfaz especial para seleccionar imágenes,
wx.chooseImage(OBJECT)
Pero esta interfaz devuelve sólo la ruta temporal de la imagen, no los datos del archivo en sí.
El mini programa no tiene una interfaz para convertir directamente a base64
Por lo tanto, primero debemos usar canvas y canvasGetImageData (mini programa versión 1.9.0 y posteriores) para obtener el contenido de la imagen,
Luego convierta la imagen a base64 a través del complemento upng.js (se requiere un archivo de complemento)
1. Coloque upng.js y pako.min. js al proyecto
2 Importe el archivo js de la página en la página
var upng = require('... /... /utils/upng.js') ;
Aquí solo necesita importar npng.js, pako.min.js se llama en npng, js
3. Construya el lienzo
elijaImagen "> ¿prueba facial?
// Canvas
// Genera una imagen base64 bits para mostrar la variable imgbase64
need-to-insert-img
4. Agregue js, haga clic en el evento elegirImagen
elijaImagen: función() {
var that = this;
var coss_signature = wx.getStorageSync( 'cos_signature');
var canvasID = "imgCanvas" ;
var canvas = wx. createCanvasContext(canvasID)
wx.chooseImage({
tipo de fuente: ['álbum', 'cámara'],
tipo de tamaño: ['original'],
recuento: 1,
éxito : function (res) {
var tempFilePaths = res. tempFilePaths;
// Obtener las rutas de los archivos
var filePath = tempFilePaths[0];
// 1. Dibuja la imagen en el lienzo.drawImage(filePath, 0, 0, 300, 200)
// Ejecuta la devolución de llamada después de completar el dibujo, API 1.7.0
canvas.draw(false, function(res){
2. p>
// 2. Obtener datos de imagen, API 1.9.0
wx .canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
ancho: 300,
altura: 200,
éxito(res ) {
?// 3. codificación png
let pngData = upng.encode( [res.data.buffer], res.width, res.height)
?// 4. codificación base64
? let base64 = wx.arrayBufferToBase64(pngData)
?// ...
? ese .setData({
imgbase64: base64
})
}
})
})
}
})
}
5. Implementación
need-to-insert-img
need-to-insert -img
Consejos
p> El largo y el ancho de la imagen del lienzo son fijos, configúrelos según sea necesario.
Puedes obtener el largo y el ancho a través de los
wx.getImageInfo(OBJECT)
Enlaces relacionados
del mini programa. >upng.js:?/photopea/UPNG.js
wx-cardscanner:?/zh8637688/wx-cardscanner A veces, el backend necesita convertir el archivo de imagen obtenido por el frontend a base64 y páselo al backend. El subprograma
del terminal tiene una interfaz especial para seleccionar imágenes,
pero esto solo devuelve una ruta temporal a la imagen, no los datos del archivo en sí.
El mini programa no tiene una interfaz para acceder directamente a base64
Por lo tanto, necesitamos usar canvas y canvasGetImageData (mini programa 1.9.0 y superior) para obtener el contenido de la imagen.
Luego convierta la imagen a base64 a través del complemento upng.js (archivo de complemento requerido)
1. Coloque los archivos upng.js y pako.min.js en el proyecto
2. Importe el archivo js de la página en la página
var upng = require('... /... /utils/upng.js');
Aquí solo necesita importar npng.js, pako.min.js se llama en npng,js
3. Construir lienzo
elegirImagen "> ¿prueba facial?
// Canvas
// Genera una imagen base64 bits para mostrar la variable imgbase64
4. Agrega js y haz clic en el evento ChooseImage
elijaImagen: function() {
var that = this;
var coss_signature = wx.getStorageSync('cos_signature');
var canvasID = "imgCanvas ";
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['álbum', 'cámara'],
sizeType: ['original '],
recuento: función (res) {
var tempFilePaths = res.tempFilePaths;
/ / Obtener las rutas de los archivos
var filePath = tempFilePaths[0];
// 1. Dibujar la imagen en el lienzo
El lienzo se puede utilizar para dibujar imágenes.
canvas.drawImage(filePath, 0, 0, 300, 200)
// Ejecutar devolución de llamada después de completar el dibujo, API 1.7.0
canvas. draw (false, function(res){
// 2. Obtener datos de imagen. API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID ,
x: 0,
y: 0,
ancho: 300,
alto: 200,
éxito(res) {
?// 3. codificación png
? let pngData = upng.encode([res.data.buffer], res.width, res. altura)
?// 4. codificación base64
? let base64 = wx.arrayBufferToBase64(pngData)
?// ...
? that.setData({
imgbase64: base64
? })
}
})
})
}
})
5. Implementación
Consejos
Imágenes dibujadas en lienzo Tiene una longitud y un ancho fijos que puede configurar según sea necesario.
Puedes utilizar los
enlaces relacionados
upng.js:?/photopea/UPNG.js
wx-cardscanner del mini programa. :?/zh8637688/wx-cardscanner