comparar planes
Presumiblemente, muchas personas encontrarán una función problemática al escribir programas pequeños: generar y compartir imágenes de Momentos. Hay varios esquemas de uso común para generar imágenes en el círculo de amigos :
- Utilice el lienzo para dibujar y generar
- Use la biblioteca de dibujo de back-end para dibujar y volver al subprograma
- Use el servidor para abrir un navegador para renderizar HTML y devuelva la captura de pantalla al subprograma
La primera solución: los requisitos más altos, el lienzo y el diseño html puro están muy lejos, el costo del aprendizaje basado en cero es alto y el efecto es impredecible en diferentes navegadores WeChat. No es fácil crear imágenes generadas hermosas y controlables en poco tiempo . tiempo fácil. Durante la operación real, encontré algo muy problemático: ni la imagen de red ni la imagen base64 se pueden representar ni mostrar directamente en el lienzo, y primero se debe descargar y pasar.
La segunda solución: la biblioteca de back-end puede cumplir con requisitos relativamente simples, pero los efectos de carga de fuentes, sombras, esquinas redondeadas, transparencia, etc. no es fácil de manejar. La captura y el escalado de imágenes tampoco son flexibles. Además, elegir esta solución es equivalente a dejar que los ingenieros de back-end resuelvan el trabajo de diseño de la interfaz de usuario, que no es su área de especialización, y el efecto puede no ser bueno.
La tercera solución: en términos de dibujo de páginas, se puede completar la tecnología front-end pura , con baja dificultad y alto grado de finalización, pero es necesario iniciar un servicio de nodo en el back-end para abrir titiritero para controlar el lado del servidor Navegador Chrome. La desventaja de esta solución es que el costo es demasiado alto . Lo hemos medido con nuestros pares en la industria, y los resultados son similares: el QPS de las imágenes generadas por un servidor 16G de 4 núcleos es solo alrededor de 10-20, lo que es equivalente a que solo se pueden generar 10 imágenes en un segundo, lo que no puede satisfacer la demanda repentina de una gran cantidad de uso compartido, y el servidor con esta configuración no puede implementar otros servicios, y solo ejecutar este servicio consumirá la mayoría de los recursos .
antecedentes
La primera versión de nuestro proyecto adoptó la primera solución, el dibujo en lienzo, sin mencionar el alto costo de aprendizaje, y hubo un problema de compatibilidad cuando se publicó en línea. Por lo tanto, al desarrollar la segunda edición, consideré encontrar un complemento escrito por otra persona. En GitHub, encontré un pintor de proyectos de código abierto del marco mp-vue. Si su proyecto está construido con mp-vue, puede darle una tratar. Pero nuestro applet usa uniapp, porque no sabíamos cómo introducir los componentes mp-vue en uniapp, abandonamos esta solución. Después de buscarlo nuevamente, en el mercado de complementos de DCloud, finalmente lo encontré: Poster Artboard . Este complemento es muy rápido de usar, y escribiré los pasos desde el principio hasta su uso.
Cómo usar cartulina
- complemento de importación
- Después de importar el complemento, se importará en el directorio uni_modules de su archivo de proyecto y podrá importarlo directamente donde lo necesite.
3. El uso específico del complemento no se repetirá aquí .
Archivo adjunto: (si dibuja un póster en formato base64, debe convertirlo en una imagen temporal local)
dealBase64(imageData) {
return new Promise((reslove, reject) => {
// 如果图片字符串不含要清空的前缀,可以不执行下行代码.
// var imageData = base64.replace(/^data:image\/\w+;base64,/, "");
// 声明文件系统
const fs = uni.getFileSystemManager();
// 随机定义路径名称
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/share' + times + '.png';
// 将base64图片写入
var that = this;
fs.writeFile({
filePath: codeimg,
data: imageData,
encoding: 'base64',
success: (res) => {
// 写入成功了的话，新的图片路径就能用了
reslove(codeimg);
}
});
})
}
复制代码