h5 canvas 合成海报

文章目录

效果
实现

效果

实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{padding: 0;width: 100vw;height: 100vh;/* background-color: black; */}canvas{outline:1px solid;/* background-color: white; */}</style>
</head>
<body><img id='img'src="" alt=""><script src="./index.js"></script><script >const params = {title:{title:'20元代金券',validity:'2021-04-05'},content:[{img:{width: 150,base64: '',// 要相同域下的图片// url: 'https://weixin.hotapp.cn/src/home/img/qrcode_example.png'url:'./img/qrcode_example.png'}, code:'47387554894'},{img:{width: 150,url:'./img/qrcode_example.png'}, code:'47387554894'}],footer:{title:'可用商家',name:'一屋子薯片韩式大头贴（上虞区店）'}}const c = new eyeCopy(params)c.init(()=>{img.src = c.getImg();})</script>
</body>
</html>


class eyeCopy {constructor(data = {}) {this.width = 300this.height = 500this.data = datathis.bg = '#FFFFFF'this.canvas = this.createCanvas()this.ctx = this.canvas.getContext('2d')this.totalH = 0document.body.appendChild(this.canvas)}async init(cabllack=()=>{}){await this.draw() // 第一遍绘制 获取高度setTimeout(async ()=>{await this.reflesh()cabllack()})}getImg(){return this.canvas.toDataURL("image/png")}async reflesh(){this.setHeight()this.setBg()this.totalH = 0await this.draw()}async draw() {const { title, content, footer } = this.datathis.drawTitle(title)await this.drawContent(content)this.drawFoot(footer)}drawTitle(data) {this.drawText({ text: data.title, mtop: 30, font: ['20px', 'Arial'] })this.drawText({ text: '有效期至' + data.validity, mtop: 5 })}async drawContent(data) {for (let i = 0; i < data.length; i++) {const {img:{url,base64,width,height}, code} = data[i]await this.drawBlock({code,height, width,src: url || 'data:image/png;base64,' + base64,})}}drawFoot(data) {this.drawText({ text: data.title, mtop: 25 })this.drawText({ text: data.name, mtop: 10 })}async drawBlock(params) {const {width,height,src,code,} = paramsawait this.drawImg({ src, width, height, mtop: 0 })this.drawText({ text: '券码:' + code, mtop: 10 })}setHeight(){console.log('totalH',this.totalH)this.canvas.height = this.totalH + 20}drawImg(params) {return new Promise((resolve, reject) => {const {mtop,width,height = width,src} = paramsvar img = new Image()this.ctx.beginPath()img.onload = () => {this.ctx.drawImage(img, (this.width - width) / 2, this.totalH + mtop, width, height)this.totalH += mtop + heightresolve()}img.src = src})}drawText(params) {const {font = ['13px', 'Arial'],align = 'center',color = 'black',mtop,text} = paramsthis.ctx.beginPath()this.ctx.font = font.join(' ')this.ctx.textAlign = alignthis.ctx.fillStyle = colorthis.ctx.fillText(text, this.width / 2, this.totalH + mtop)const h = parseInt(font[0])this.totalH += h + mtop}createCanvas() {const canvas = document.createElement('canvas')canvas.width = this.widthcanvas.height = this.heightreturn canvas}setBg(){this.ctx.beginPath()this.ctx.fillStyle = this.bgthis.ctx.fillRect(0,0,this.width, this.height)}
}// 导出base64位码
async function eyeCopyFun(params){const draw = new eyeCopy(params)await draw.init()return draw.getImg()
}

h5 canvas 合成海报相关推荐

canvas合成海报所遇问题及解决方案总结
最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...
微信小程序 canvas 合成海报
1.先百度了解canvas相关文档: 2.了解微信小程序授权登录与授权登录下保存图片权限问题: 3.canvas标签属性不能是display:none: <canvas class=" ...
canvas合成海报图
根据接口返回的参数生成一个带有相关链接的二维码然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面所需要的参数和图片列表都是父组件传过来的使用了之前写过的alert弹窗 <tem ...
H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
利用canvas把二维码和图片合成海报
思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成 ...
H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
canvas图片合成海报
canvas图片合成海报 //创建一共hb.js代码如下 var sthb = {//参数说明:info是一个对象里面主要传入的是绘制图片的宽高和图片的src还有我们生成的二维码图片的宽高位置init ...
vue 中生成二维码，合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
基于支付宝小程序合成海报
合成海报是活动.商品分享中比较常用的功能.之前在微信小程序中经常实现,最近由于项目需要,在支付宝小程序中也实现了该功能.实现流程大同小异,但由于是两个生态的物种,所以也有个别地方需要注意,在此记录. ...

h5 canvas 合成海报

文章目录

效果

实现

h5 canvas 合成海报相关推荐

最新文章

热门文章