// 创建canvas元素
const canvas = document.createElement('canvas');
canvas.width = 600; // 设置宽度
canvas.height = 400; // 设置高度
document.body.appendChild(canvas); // 将canvas添加到页面const ctx = canvas.getContext('2d');// 绘制背景
ctx.fillStyle = '#f0f0f0'; // 设置背景颜色
ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制矩形// 绘制标题
ctx.font = 'bold 30px Arial'; // 设置字体
ctx.fillStyle = '#333'; // 设置文字颜色
ctx.textAlign = 'center'; // 设置文字居中
ctx.fillText('分享标题', canvas.width / 2, 50);// 绘制二维码 (需要一个二维码库，例如 qrcode.js)
// 假设你已经生成了一个二维码图片的 data URL，名为 qrCodeDataURL
const qrCodeImg = new Image();
qrCodeImg.onload = () => {ctx.drawImage(qrCodeImg, canvas.width - 120, canvas.height - 120, 100, 100);// 绘制二维码说明文字ctx.font = '14px Arial';ctx.fillStyle = '#666';ctx.textAlign = 'center';ctx.fillText('扫码分享', canvas.width - 60, canvas.height - 10);// 将canvas转换成图片const dataURL = canvas.toDataURL('image/png'); // 可以选择png或jpeg// 创建一个链接以下载图片const a = document.createElement('a');a.href = dataURL;a.download = '分享图片.png'; // 设置文件名a.style.display = 'none'; // 隐藏链接document.body.appendChild(a);a.click(); // 模拟点击链接下载图片document.body.removeChild(a); // 下载后移除链接
};
qrCodeImg.src = 'qrcode data url'; // 将你的二维码 data URL 赋值到这里// 其他绘制内容，例如：
// 绘制图片
// const img = new Image();
// img.onload = () => {
// ctx.drawImage(img, 20, 80, 200, 150);
// };
// img.src = 'image url';// 绘制描述文字
// ctx.font = '16px Arial';
// ctx.fillStyle = '#555';
// ctx.textAlign = 'left';
// const text = '这是一段描述文字，可以换行显示。';
// const lines = text.split('\n');
// for (let i = 0; i < lines.length; i++) {
// ctx.fillText(lines[i], 20, 250 + i * 20);
// }
使用方法和关键点：
- 二维码生成: 这段代码假设你已经使用一个二维码库（例如 qrcode.js）生成了二维码图片的 data URL。你需要将
'qrcode data url'替换成你实际生成的 data URL。 qrcode.js 的使用示例：
const qrcode = new QRCode(document.getElementById("qrcode"), {text: "你的分享链接",width: 128,height: 128,colorDark : "#000000",colorLight : "#ffffff",correctLevel : QRCode.CorrectLevel.H
});const qrCodeDataURL = document.getElementById('qrcode').querySelector('img').src; // 获取二维码的 data URL// ... 将 qrCodeDataURL 用于 canvas 绘制 ...
-
图片加载: 使用
Image对象加载图片，并在onload事件中进行绘制，确保图片加载完成后再绘制到 canvas 上。 -
文字换行: 如果需要绘制多行文字，可以将文字按照换行符分割成数组，然后循环绘制每一行。
-
图片下载: 使用
canvas.toDataURL()将 canvas 转换成图片的 data URL，然后创建一个隐藏的链接，设置href为 data URL，并模拟点击链接进行下载。 -
样式自定义: 可以根据需要修改
canvas的尺寸、背景颜色、字体样式、文字颜色等。 -
库的使用: 这段代码的核心是使用 HTML5 Canvas API。 对于二维码生成，你需要引入一个二维码库，例如
