/** * 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); console.log(drawer) // 绘制背景图 const background = await qsc.drawImg({ type: 'image', val: drawer.background, x: 0, y: 0, width, mode: 'widthFix', zIndex: 0, }); // const background = await qsc.drawImg({ // "name": "avatar", // "type": "image", // "val": "https://file.sheepjs.com/static/img/shop/goods/share.png", // "x": 14.040000000000001, // "y": 14.040000000000001, // "width": 49.14000000000001, // "height": 49.14000000000001, // "d": 49.14000000000001 // }); 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, }); } try { await qsc.drawImg(item); } catch (error) { console.log(error) } qsc.restore(); } // 绘制二维码 if (item.type === 'qrcode') { await qsc.drawQrCode(item); } } await qsc.draw(); // 延迟执行, 防止不稳定 setTimeout(async () => { options.src = await qsc.toImage(); }, 100); return options; }