canvas绘制图片二维码+文字+背景下载到本地

之前写过下载二维码的需求，需求简单，只要能下载就行，但是下载到本地就一个纯二维码的小图片，感觉不怎么美观。
闲来无事，以下自己写了个小demo，丰富canvas下载到本地的图片内容，可以添加照片，描述文字，背景样式等…

准备两个节点

<canvas id="canvas"></canvas>
<a id="download" download href="">下载</a>

js实现绘制

const url = "https://t7.baidu.com/it/u=3766339589,272600460&fm=193&f=GIF";
const img = new Image(); // 创建img元素
const download = document.getElementById("download");const imgFrame = new Image(); // 相框图片
imgFrame.setAttribute("crossorigin", "anonymous");
imgFrame.src = "https://img95.699pic.com/xsj/1c/xv/je.jpg!/fh/300";img.setAttribute("crossorigin", "anonymous"); // 设置该属性 不然使用canvas.toDataURL会报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.img.onload = function () {const imgWidth = 600,imgHeight = 500;const canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d");// 设置画布大小canvas.width = imgWidth + 20;canvas.height = imgHeight + 80;// 绘制背景颜色ctx.fillStyle = "pink";ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制文字(文本内容，x坐标，y坐标)ctx.font = "28px serif";ctx.fillStyle = "blue";ctx.textAlign = "center";ctx.fillText("点击图片或者下载按钮 下载图片到本地", canvas.width / 2, canvas.height - 10); // 中间位置开始绘制 配合 ctx.textAlign 使文字水平居中ctx.strokeStyle = "red"; // 文本边框颜色ctx.strokeText("点击图片或者下载按钮 下载图片到本地", canvas.width / 2, canvas.height - 10); // 文本边框// 绘制图片(路径，x坐标，y坐标，x缩放大小，y缩放大小)ctx.drawImage(imgFrame, 10, 10, imgWidth, imgHeight);// 前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小ctx.drawImage(img, 380, 100, 500, 380, 61, 65, 494, 380);// 画线边框颜色ctx.strokeStyle = "red"; ctx.beginPath();ctx.moveTo(60, 65);ctx.lineTo(560, 65);ctx.lineTo(560, 450);ctx.lineTo(60, 450);ctx.lineTo(60, 65);ctx.stroke();download.href = canvas.toDataURL("image/png");
};img.src = url; // 设置图片源地址// 点击图片下载
canvas.onclick = function () {download.click();
};

页面效果展示

下载到本地是包涵背景 + 图片 + 文字的效果，可以实现页面中的图片，二维码等下载需求

canvas绘制图片二维码+文字+背景下载到本地相关推荐

微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
uniapp 生成分享图片(图片+二维码)，并保存到本地相册功能实现
生成分享图片使用场景在使用电商app时,通常有个分享给好友的功能,如果想要做分销类型,发展下线,也就是你邀请的好友是你的下级的话,就需要分享时将个人信息附带进去,因此会涉及到生成分享图片. 界面 ...
vue 在线生成二维码二维码生成背景下载
安装引用 3.注入 app.vue 这里只是生成二维码生成二维码 js 这里是需要二维码并且与另一张合成一张image的! 上代码
前端合成二维码与背景图片，批量导出ZIP下载
前端合成二维码与背景图片,批量导出ZIP下载背景:需要生成很多的二维码,并且结合背景图片一起生成图片,批量下载到本地,提供给打印厂商进行打印. 方案1:后台合成,后台提供下载. 方案2:前端合成,前 ...
opencv中的美图技巧（祛斑,词云,风格迁移,抠图,插图,修改背景,图片二维码）等着你的女朋友夸你吧
个人ps 没掌握得怎么好,尝试用程序来完成ps的功能吧. 有斑点怎么办:祛斑. 只有一张城市白天图,像生成黑夜图怎么办,用风格迁移把. 人物抠图就不说啦吧. 没钱带女友旅游世界怎么办,我教你修改你背景 ...
JAVA生成的二维码以及给二维码添加背景图片
JAVA生成的二维码以及给二维码添加背景图片** 1.页面只需一行代码即可(用ajax请求得不到响应,也可以用表单提交) window.location.href = "${ctx}/qrc ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
PHP给微信二维码添加背景和昵称，微信带参数海报跨坑记录。
先获取微信二维码,这里我获取的是永久二维码: $wx= $this->getTicket($this->userid);//我带的参数是用户ID,可自由发挥.//下面是相关函数 funct ...
vue 生成二维码并可以下载带有边框背景颜色的二维码
项目需求:需要生成一个可以下载且带有边框背景的二维码如果只用qrcode.js只能实现下载二维码,但是下载下来的二维码没有边框背景,可识度非常低,所以需要给下载的二维码加个边框,白色灰色之类的首先 ...

canvas绘制图片二维码+文字+背景下载到本地

canvas绘制图片二维码+文字+背景下载到本地相关推荐

最新文章

热门文章

canvas绘制图片二维码+文字+背景 下载到本地

canvas绘制图片二维码+文字+背景 下载到本地相关推荐

最新文章

热门文章

canvas绘制图片二维码+文字+背景下载到本地

canvas绘制图片二维码+文字+背景下载到本地相关推荐