本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下
思路:在微信中登录,后台传来的是一个链接、一个名字、一张图片。把图片当做背景,画满整个画布。之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上。把名字画到画布上。把整张画布转为图片。
一、定义画布和合成海报的img
<style type="text/css"> #canbox { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; } .canimg { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; } </style>
<div id="qrcode"> </div> <div id="canbox"> <canvas id="myCanvas" width="" height=""></canvas> </div> <img class="canimg" src="/UploadFiles/2021-04-02/">二、用jquery.qrcode把网址变成二维码
后台传过来的是网址,需要转为二维码,二维码也是canvas,需要把二维码转为图片
$("#qrcode").qrcode({ width: 72, //宽度 height: 72, //高度 text: res.data.poster_qrcode, //任意内容 });三、把图片画到画布上,需要占满全屏
//画海报 var width = document.getElementById("canbox").offsetWidth; //宽度 var height = document.getElementById("canbox").offsetHeight; // 高度 var c = document.getElementById("myCanvas"); c.width = width c.height = height var ctx = c.getContext("2d"); //首先画上背景图 var img = new Image(); img.src = this.list.poster; img.setAttribute("crossOrigin", 'Anonymous') var x_bot = height - 44 //画上名字 ctx.font = "19px Georgia";//画上二维码 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } var mycans = $('canvas')[1];//二维码所在的canvas var codeimg = convertCanvasToImage(mycans) var xw = width - 72 - 29 var xh = height - 6 - 72img.onload = function() { //必须等待图片加载完成 ctx.drawImage(img, 0, 0, width, height); //绘制图像进行拉伸 ctx.fillText(that.name, 28, x_bot); ctx.drawImage(codeimg, xw, xh, 72, 72); //绘制完成,转为图片 setTimeout(function() { //在ios上无法在画完之后取到整个画布内容,加了个settimeout var bigcan = $('canvas')[0]; let images = new Image(); images.src = bigcan.toDataURL("image/png"); alert(bigcan.toDataURL("image/png")) images.setAttribute("crossOrigin", 'Anonymous') $('.canimg').attr('src', bigcan.toDataURL("image/png")) }, 0) }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略
- 视觉小说《神椿市建设中REGENERATE》将于2025年2月20日发售
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】