uniapp 使用cavans 生成海報

npm install qs-canvas

1.創建 useCanvas.js

/*** Shopro + qs-canvas 繪制海報* @version 1.0.0* @author lidongtony* @param {Object} options - 海報參數* @param {Object} vm - 自定義組件實例*/
import QSCanvas from 'qs-canvas';
import { getPosterData } from './poster';export default async function useCanvas(options, vm) {const width = options.width;const qsc = new QSCanvas({canvasId: options.canvasId,width: options.width,height: options.height,setCanvasWH: (canvas) => {options.height = canvas.height;},},vm,);let drawer = getPosterData(options);// 繪制背景圖const background = await qsc.drawImg({type: 'image',val: drawer.background,x: 0,y: 0,width,mode: 'widthFix',zIndex: 0,});await qsc.updateCanvasWH({width: background.width,height: background.bottom,});let list = drawer.list;for (let i = 0; i < list.length; i++) {let item = list[i];// 繪制文字if (item.type === 'text') {await qsc.drawText(item);}// 繪制圖片if (item.type === 'image') {if (item.d) {qsc.setCircle({x: item.x,y: item.y,d: item.d,clip: true,});}if (item.r) {qsc.setRect({x: item.x,y: item.y,height: item.height,width: item.width,r: item.r,clip: true,});}await qsc.drawImg(item);qsc.restore();}// 繪制二維碼if (item.type === 'qrcode') {await qsc.drawQrCode(item);}}await qsc.draw();// 延遲執行, 防止不穩定setTimeout(async () => {options.src = await qsc.toImage();}, 100);return options;
}

index.vue

<template><canvasclass="hideCanvas":canvas-id="poster.canvasId":id="poster.canvasId":style="{height: poster.height + 'px',width: poster.width + 'px',}"/></template><script setup>import useCanvas from './useCanvas';const props = defineProps({shareInfo: {type: Object,default() {},},});const Sys = uni.getSystemInfoSync();const poster = reactive({canvasId: 'canvasId',width: Sys.device.windowWidth * 0.9,height: 600,src: '',});async function getPoster() {poster.src = '';poster.shareInfo = props.shareInfo;// #ifdef APP-PLUSposter.canvasId = 'canvasId-' + new Date().getTime();// #endifconst canvas = await useCanvas(poster, vm);return canvas;}
</script>

poster/index.js

import user from './user';
export function getPosterData(options) {switch (options.shareInfo.poster.type) {case 'user':return user(options);}
}export function formatImageUrlProtocol(url) {// #ifdef H5// H5平臺 https協議下需要轉換if (window.location.protocol === 'https:' && url.indexOf('http:') === 0) {url = url.replace('http:', 'https:');}// #endif// #ifdef MP-WEIXIN// 小程序平臺 需要強制轉換為https協議if (url.indexOf('http:') === 0) {url = url.replace('http:', 'https:');}// #endifreturn url;
}

需要不同的海報 就創建不同 js 文件 存放你需要畫的那些元素
poster/user.js

import { formatImageUrlProtocol } from './index';const user = (poster) => {const width = poster.width;//你需要拼接的參數const userInfo = {};return {background: formatImageUrlProtocol('httpxxxxxxxx'),list: [{name: 'nickname',type: 'text',val: userInfo.nickname,x: width / 2,y: width * 0.4,paintbrushProps: {textAlign: 'center',fillStyle: '#333',font: {fontSize: 14,fontFamily: 'sans-serif',},},},{name: 'avatar',type: 'image',val: formatImageUrlProtocol('httpxxxxxx'),x: width * 0.4,y: width * 0.16,width: width * 0.2,height: width * 0.2,d: width * 0.2,},// #ifndef MP-WEIXIN{name: 'qrcode',type: 'qrcode',val: poster.shareInfo.link,x: width * 0.35,y: width * 0.84,size: width * 0.3,},// #endif// #ifdef MP-WEIXIN{name: 'wxacode',type: 'image',val: 'httpxxxxxxxxxxx',x: width * 0.35,y: width * 0.84,width: width * 0.3,height: width * 0.3,},// #endif],};
};export default user;