前端实战之使用canvas合并图片
最近做一个完整的系统,前端中涉及到一个推广图片的生成,其中推广图片是由一个变化的链接生成的二维码与一个固定图片拼接而成
实现demo:
qrcode.png:https://images.cnblogs.com/cnblogs_com/xingxia/1260814/o_241105095849_%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%A4%BA%E4%BE%8B.jpg
poster.png: https://images.cnblogs.com/cnblogs_com/xingxia/1260814/o_241105095849_%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%A4%BA%E4%BE%8B%E5%BA%95%E5%9B%BE.jpg
html部分:
<div> <img id="qrcode" src="/img/promotion/qrcode.png" alt="二维码"> <img id="poster" src="/img/promotion/poster.png" alt="海报模板"> <img id="myPoster" alt="合成海报"> </div> <button ng-click="drawPosterImage()">合成图片</button>
js部分:
//生成海报 $scope.drawPosterImage = function(){ var canvas; canvas = document.createElement("canvas"); canvas.width = 1242; canvas.height = 2208; var context = canvas.getContext("2d"); context.rect(0 , 0 , canvas.width , canvas.height); context.fillStyle = "#fff"; context.fill(); var myImage2 = new Image(); myImage2.src = $("#poster").attr("src"); myImage2.crossOrigin = 'Anonymous'; myImage2.onload = function(){ context.drawImage(myImage2 , 0 , 0 , 1242 , 2208); var myImage = new Image(); myImage.src = $("#qrcode").attr("src"); myImage.crossOrigin = 'Anonymous'; myImage.onload = function(){ context.drawImage(myImage , 499 , 1703 , 243 , 243); var base64 = canvas.toDataURL("image/png"); //获取base64的图片流 var img = document.getElementById('myPoster'); img.setAttribute('src' , base64); } } }
其中生成二维码是使用的
qrcodejs2-fix
pnpm install qrcodejs2-fix
注意: 这里使用的是qrcode2-fix,因为我的是在vue3项目中,使用qrcode2会出现一些问题
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)