Generación de carteles para compartir móviles
Recientemente, la demanda de un proyecto es generar un póster para compartir productos y guardarlo en el teléfono móvil para que sea compatible con H5 y applets.
Después de comunicarse con los compañeros de clase de back-end, el póster se genera en el front-end con el rendimiento más bajo y la mejor experiencia interactiva. Primero, observe el efecto de hacer un buen trabajo.
Agregue una descripción del enlace para la dirección del código fuente
El marco frontal utiliza uni-aplicación a envasar fácilmente en H5 y pequeños programas. La
solución de aplicación es obtener los datos devueltos por el back-end, utilizar la tela de lona para poner los datos en conjunto y generar una imagen. La
principal los parámetros son: imagen de fondo, imagen del producto, código QR, precio, precio original, título
Después de obtener la imagen del producto y el código QR, debe descargarlos. Use la API de uni-app
para escribir un método de descarga y templatedefinir el componente de lienzo
<template>
<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
</template>
onReady(){
this.downloadFileImg('','pic');
this.downloadFileImg('','code');
},
methods:{
downloadFileImg(url,name){
let self = this
uni.downloadFile({
url: url,
success: function(res) {
self[name] = res.tempFilePath;
},
fail: function(erros) {
console.log(error)
}
});
}
}De esta forma, la imagen se guarda temporalmente en un archivo temporal local.
uni.downloadFileCabe señalar que
cuando se ejecuta cada plataforma de subprograma, las API relacionadas con la red deben configurarse con una lista blanca de nombres de dominio antes de su uso. Es de dominio cruzado en h5 y los usuarios deben manejar los problemas de dominio cruzado.
Escriba el método para que el lienzo genere imágenes
/**
* 获取分享海报
* @param array imgArr 海报素材 0 背景图 1商品图 2二维码
* @param string store_name 素材文字
* @param string price 价格
* @param string ot_price 原始价格
* @param function successFn 回调函数
*/
PosterCanvas: function(imgArr, store_name, price, ot_price, successFn) {
let that = this;
uni.showLoading({
title: '海报生成中',
mask: true
});
const ctx = uni.createCanvasContext('myCanvas');
ctx.clearRect(0, 0, 0, 0);
/**
* 只能获取合法域名下的图片信息,本地调试无法获取
*
*/
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 750, 1150);
uni.getImageInfo({
src: imgArr[0],
success: function(res) {
const WIDTH = res.width;
const HEIGHT = res.height;
ctx.drawImage(imgArr[1], 0, 0, WIDTH, WIDTH);
ctx.save();
let r = 110;
let d = r * 2;
let cx = 480;
let cy = 790;
ctx.arc(cx + r, cy + r, r, 0, 2 * Math.PI);
// ctx.clip();
ctx.drawImage(imgArr[2], cx, cy, d, d);
ctx.restore();
const CONTENT_ROW_LENGTH = 20;
let [contentLeng, contentArray, contentRows] = that.textByteLength(store_name, CONTENT_ROW_LENGTH);
if (contentRows > 2) {
contentRows = 2;
let textArray = contentArray.slice(0, 2);
textArray[textArray.length - 1] += '……';
contentArray = textArray;
}
ctx.setTextAlign('left');
ctx.setFontSize(36);
ctx.setFillStyle('#000');
// let contentHh = 36 * 1.5;
let contentHh = 36;
for (let m = 0; m < contentArray.length; m++) {
if (m) {
ctx.fillText(contentArray[m], 50, 1000 + contentHh * m + 18, 1100);
} else {
ctx.fillText(contentArray[m], 50, 1000 + contentHh * m, 1100);
}
}
ctx.setTextAlign('left')
ctx.setFontSize(72);
ctx.setFillStyle('#DA4F2A');
ctx.fillText('￥' + price, 40, 820 + contentHh);
ctx.setTextAlign('left')
ctx.setFontSize(36);
ctx.setFillStyle('#999');
ctx.fillText('￥' + ot_price, 50, 876 + contentHh);
var underline = function(ctx, text, x, y, size, color, thickness, offset) {
var width = ctx.measureText(text).width;
switch (ctx.textAlign) {
case "center":
x -= (width / 2);
break;
case "right":
x -= width;
break;
}
y += size + offset;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = thickness;
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.stroke();
}
underline(ctx, '￥' + ot_price, 55, 865, 36, '#999', 2, 0)
ctx.setTextAlign('left')
ctx.setFontSize(28);
ctx.setFillStyle('#999');
ctx.fillText('长按或扫描查看', 490, 1030 + contentHh);
ctx.draw(true, function() {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
fileType: 'png',
destWidth: WIDTH,
destHeight: HEIGHT,
success: function(res) {
uni.hideLoading();
successFn && successFn(res.tempFilePath);
}
})
});
},
fail: function(err) {
uni.hideLoading();
that.Tips({
title: '无法获取图片信息'
});
}
})
},Primero cree un canvaslienzo para
obtener la información de la imagen de fondo, obtenga el ancho y el alto, luego dibuje la imagen del producto y guárdelo.
A continuación, dibuje el código QR, coloque las coordenadas y guárdelo. <br>
Mientras trabaja con el problema de ajustar el texto y establecer el tamaño Color y su método <br>
Establecer el color y el tamaño del precio correspondiente y el precio original, así como las coordenadas. <br>
Debido a que el precio tiene una línea horizontal, busqué el línea horizontal en Internet y solo miré el método. <br>
Finalmente, genere información de imagen y use el uni.canvasToTempFilePathmétodo para exportar el contenido del área especificada del lienzo actual para generar una imagen del tamaño especificado y devolver el archivo camino. <br> De
esta manera, obtendremos un archivo .png temporal. Ahora tenemos el último paso para renderizar el archivo al componente. Desde la función callback, podemos volver a <br>
Este método se usa por ejemplo, Lo escribo en un método público Inside y vinculado al prototipo vue para que lo usemos más tarde <br>
Ahora escriba las llamadas al método
handelCanvas(){
let imgArr = ['背景图路径',this.pic,this.code]
this.$util.PosterCanvas(imgArr,'标题','价格','原价',function(tempFilePath){
console.log(tempFilePath)
})
}De esta manera, la imagen generada es un archivo temporal. Ahora colóquelo en la página y muéstrelo. La
función de guardar imagen H5 puede presionar prolongadamente para guardar la imagen. Aquí solo se usa el programa pequeño.
Primero, verifique la autorización y llame uni después de obtener la autorización. -api de la aplicación está bien
savePosterPath: function() {
let that = this;
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: 'canvas生成的临时图片',
success: function(res) {
....成功了
},
fail: function(res) {
....失败了
}
});
}
});
} else {
uni.saveImageToPhotosAlbum({
filePath: 'canvas生成的临时图片',
success: function(res) {
....成功了
},
fail: function(res) {
....失败了
}
});
}
}
});
},De esta manera se completa la generación de carteles de front-end, ¿la has abandonado?