喜欢还请收藏点个小心心
WEB版的
<canvas type="2d" id="canvas"></canvas>
// 绘画数据
const params = [
// 文字
{ type: "text", text: "这里是文字", left: 100, top: 20, width: 100, textAlign: 'center' },
// 图片
{ type: "img", url: "https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg", left: 0, top: 40, width: 500, height: 280, },
// 圆形图片 radius 为 true
{ type: "img", url: "https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg", radius: true, left: 0, top: 340, width: 150, height: 150, },
// 圆角图片 radius 为数字
{ type: "img", url: "https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg", radius: 10, left: 270, top: 340, width: 150, height: 150, },
]
// 画布参数
const option = { dom: "#canvas", params, width: 500, height: 500, dpr: 1 };
// 解析参数
async function parseParams(ctx, params) {
let data = [];
for (let item of params) {
let { type, url } = item;
let obj = { ...item };
if (type == 'img') {
// 图片是url地址，需要先下载图片
obj.img = await downloadImage(obj);
drawImage(ctx, obj);
}
if (type === 'text') drawText(ctx, obj)
}
return data;
}
// 下载图片
async function downloadImage(item) {
return new Promise((resolve, reject) => {
if (!item.url) return;
// 把图片数据resolve回去，这里是需要做同步处理的。
const img = new Image();
img.onload = () => resolve(img)
img.src = item.url;
})
}
// 绘制文本数据
function drawText(ctx, item) {
ctx.save();
let { text, width, height, left, top, color = "#444", textAlign, font = '20px' } = item;
// 设置文本颜色
ctx.fillstyle = color;
// 设置文本大小
ctx.font = font;
// 设置水平对齐方式
ctx.textAlign = textAlign || "center";
// 设置垂直对齐方式
ctx.textBaseline = "middle";
ctx.fillText(text, left, top);
}
// 绘制图片
function drawImage(ctx, item) {
ctx.save()
let { img, width, height, left, top, radius } = item;
if (radius === true) {
ctx.beginPath()
ctx.arc(width / 2 + left, height / 2 + top, width / 2, 0, Math.PI * 2, false);
ctx.clip();
} else if (typeof radius === 'number') {
// 处理圆角
let a = { x: left + radius, y: top };
let b = { x: left + width, y: top };
let c = { x: left + width, y: top + height };
let d = { x: left, y: top + height };
let e = { x: left, y: top };
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.arcTo(b.x, b.y, c.x, c.y, radius);
ctx.arcTo(c.x, c.y, d.x, d.y, radius);
ctx.arcTo(d.x, d.y, e.x, e.y, radius);
ctx.arcTo(e.x, e.y, a.x, a.y, radius);
ctx.clip();
}
ctx.drawImage(img, left, top, width, height);
ctx.restore()
}
// 初始化
async function onInitCanvas(obj) {
let ctx = null;
let { dom, params, width = 500, height = 200, dpr = 1 } = obj;
if (!ctx) {
let canvas = null;
if (typeof dom == 'string') canvas = document.querySelector(dom);
else if(dom instanceof HTMLCanvasElement) canvas = dom;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx = canvas.getContext("2d");
}
// 解析数据
if (Array.isArray(params) && params.length) await parseParams(ctx, params);
}
onInitCanvas(option)
支付宝小程序canvas生成海报
<canvas type="2d" id="canvas" style="{{style}}" width="{{width}}" height="{{height}}"></canvas>
Component({
mixins: [],
data: {
style: {},
width: '',
height: '',
dpr: 1,
option: { dom: '#canvas', width: 750, height: 800, },
params: [
// 文字
{ type: "text", text: "这里是文字", left: 100, top: 20, width: 100, textAlign: 'center', color: '#ffffff' },
// 图片
{ type: "img", url: "https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg", left: 0, top: 40, width: 375, height: 280, },
// 圆形图片 radius 为 true
{ type: "img", url: "https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg", radius: true, left: 0, top: 340, width: 50, height: 50, },
// 圆角图片 radius 为数字
{ type: "img", url: "https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg", radius: 10, left: 150, top: 340, width: 150, height: 150, },
]
},
props: {},
didMount() {
let dpr = my.getSystemInfoSync().pixelRatio;
let { width = 500, height = 200, } = this.data.option;
this.setData({
width: width + 'px',
height: height + 'px',
dpr,
style: {
width: width + 'px', height: height + 'px'
}
});
this.onInitCanvas()
},
didUpdate() { },
didUnmount() { },
methods: {
// 解析参数
async parseParams(ctx, params, canvas) {
let data = [];
for (let item of params) {
let { type, url } = item;
let obj = { ...item };
if (type == 'img') {
// 图片是url地址，需要先下载图片
obj.img = await this.downloadImage(obj, canvas);
}
data.push(obj)
}
let timer = setTimeout(() => {
clearTimeout(timer)
this.asyncDraw(ctx, data);
}, 500)
},
async asyncDraw(ctx, params) {
params.forEach(e => {
if (e.type === 'text') this.drawText(ctx, e);
if (e.type === 'img') this.drawImage(ctx, e);
})
},
// 下载图片
async downloadImage(item, canvas) {
return new Promise((resolve, reject) => {
if (!item.url) return;
// 把图片数据resolve回去，这里是需要做同步处理的。
const img = canvas.createImage();
img.onload = () => resolve(img)
img.src = item.url;
})
},
// 绘制文本数据
drawText(ctx, item) {
ctx.save();
let { text, width, height, left, top, color = "#444", textAlign, font = '22px' } = item;
console.log(font);
// 设置文本颜色
ctx.fillStyle = color
// 设置文本大小
ctx.font = font + ' Arial';
// 设置水平对齐方式
ctx.textAlign = textAlign || "center";
// 设置垂直对齐方式
ctx.textBaseline = "middle";
ctx.fillText(text, left, top);
},
// 绘制图片
drawImage(ctx, item) {
ctx.save();
let { dpr } = this.data;
let { img, width, height, left, top, radius } = item;
if (radius === true) {
ctx.beginPath()
ctx.arc(width / 2 + left, height / 2 + top, width / 2, 0, Math.PI * 2, false);
ctx.clip();
} else if (typeof radius === 'number') {
// 处理圆角
let a = { x: left + radius, y: top };
let b = { x: left + width, y: top };
let c = { x: left + width, y: top + height };
let d = { x: left, y: top + height };
let e = { x: left, y: top };
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.arcTo(b.x, b.y, c.x, c.y, radius);
ctx.arcTo(c.x, c.y, d.x, d.y, radius);
ctx.arcTo(d.x, d.y, e.x, e.y, radius);
ctx.arcTo(e.x, e.y, a.x, a.y, radius);
ctx.clip();
}
ctx.drawImage(img, left, top, width, height);
ctx.restore()
},
// 初始化
async onInitCanvas() {
let { option, params } = this.data;
let { dom = "#canvas" } = option;
const query = my.createSelectorQuery();
query.select(dom).node().exec(res => {
const canvas = res[0].node;
let ctx = canvas.getContext("2d");
this.parseParams(ctx, params, canvas);
})
}
},
});
