h5 使用canvas绘制海报并保存到本地

最近做了一个项目，需求是这样的：保存海报到本地，如图

点击保存之后需要下载到本地

刚开始采用的是html2canvas找个插件，可以用但是发现保存的图片很模糊，如下：

这样肯定是不行的，于是决定用canvas手写一个

也很简单，大概说一下思路，

1. 就是先创建一个画布，然后等待图片加载完成后将图片绘制到画布上，

2. 由于二维码是异步请求的，所以在上一个img的onload方法中再创建一个二维码的图片，

3. 再画到这个画布上，

4. 利用canvas的toDataURL()转为base64的图像地址

5. 最后利用a标签的下载功能保存到本地就可以

话不多说，上代码：

// 使用canvas绘制图片
const generateCanvas = (url: string = "/assets/images/img-invite1.png"
): void => {var c: any = document.getElementById("canvas");var ctx = c.getContext("2d");    //创建画布var img = document.createElement("img");img.width = 1050;          img.height = 1695;img.src = url;img.onload = function () {     //图片加载完成之后ctx.drawImage(img, 0, 0, 1050, 1695);    // 后面两个参数可以尽量大一点，让图片更清晰，需要与图片宽高一致ctx.font = "35px Arial";ctx.fillStyle = "#fff";ctx.fillText(`我的邀请码：${userInfo.value.promotionCode}`, 380, 1550);var img1 = document.createElement("img");    //创建第二个图片，这是二维码图片img1.width = 300;img1.height = 300;img1.src = inviteImgCode.value;           //inviteImgCode.value是请求的二维码地址img1.onload = function () {             ctx.drawImage(img1, 380, 1100, 300, 300);  // 再绘制一遍var eleLink = document.createElement("a");     // 下面就是保存的步骤了，很简单 自行看看eleLink.href = c.toDataURL(); // 转换后的图片地址eleLink.download = "海报";document.body.appendChild(eleLink);// 触发点击eleLink.click();// 然后移除document.body.removeChild(eleLink);};};
};

最终效果如下，很清晰

有需要的小伙伴自行觅食哈哈哈~，

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！