mall-front-app/sheep/components/s-share-modal/canvas-poster/useCanvas.js

/**
 * 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 = await getPosterData(options);
	// console.log("drawer",drawer)
	// 绘制背景图

	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') {
			console.log(item)
			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 === 'rect') {
			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.draw(item);
			} catch (error) {
				console.log(error)
			}
			qsc.restore();
		}
		
		// 绘制二维码
		if (item.type === 'qrcode') {
			console.log(item)
			await qsc.drawQrCode(item);
		}
	}

	await qsc.draw();
	// 延迟执行, 防止不稳定
	setTimeout(async () => {
		
		options.src = await qsc.toImage();
		
	}, 100);
	return options;
}