效果
实现
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body{
padding: 0;
width: 100vw;
height: 100vh;
}
canvas{
outline:1px solid;
}
style>
head>
<body>
![]()
<script src="./index.js">script>
<script >
const params = {
title:{
title:'20元代金券',
validity:'2021-04-05'
},
content:[
{
img:{
width: 150,
base64: '',
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 = 300
this.height = 500
this.data = data
this.bg = '#FFFFFF'
this.canvas = this.createCanvas()
this.ctx = this.canvas.getContext('2d')
this.totalH = 0
document.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 = 0
await this.draw()
}
async draw() {
const { title, content, footer } = this.data
this.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,
} = params
await 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
} = params
var img = new Image()
this.ctx.beginPath()
img.onload = () => {
this.ctx.drawImage(img, (this.width - width) / 2, this.totalH + mtop, width, height)
this.totalH += mtop + height
resolve()
}
img.src = src
})
}
drawText(params) {
const {
font = ['13px', 'Arial'],
align = 'center',
color = 'black',
mtop,
text
} = params
this.ctx.beginPath()
this.ctx.font = font.join(' ')
this.ctx.textAlign = align
this.ctx.fillStyle = color
this.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.width
canvas.height = this.height
return canvas
}
setBg(){
this.ctx.beginPath()
this.ctx.fillStyle = this.bg
this.ctx.fillRect(0,0,this.width, this.height)
}
}
async function eyeCopyFun(params){
const draw = new eyeCopy(params)
await draw.init()
return draw.getImg()
}
