|
|
|
@ -259,55 +259,6 @@ |
|
|
|
this.showShare = false |
|
|
|
this.showLayer = false |
|
|
|
}, |
|
|
|
formSubmit() { |
|
|
|
wx.createSelectorQuery() |
|
|
|
.select('#photo') // 在 canvas的 id |
|
|
|
.fields({ |
|
|
|
node: true, |
|
|
|
size: true |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
// Canvas 对象 |
|
|
|
const canvas = res[0].node |
|
|
|
this.canvas = canvas |
|
|
|
// 渲染上下文 |
|
|
|
const context = canvas.getContext('2d') |
|
|
|
// canvas 画布的实际绘制宽高 |
|
|
|
const width = res[0].width |
|
|
|
const height = res[0].height |
|
|
|
// 初始化画布大小 |
|
|
|
const dpr = wx.getWindowInfo().pixelRatio |
|
|
|
canvas.width = width * dpr |
|
|
|
canvas.height = height * dpr |
|
|
|
context.scale(dpr, dpr) |
|
|
|
// 清空画布 |
|
|
|
context.clearRect(0, 0, width, height) |
|
|
|
//canvas背景色 |
|
|
|
context.fillStyle = '#3c9cff'; |
|
|
|
context.fillStyle = "#FFF" // 背景颜色 |
|
|
|
context.fillRect(0, 0, 500, 800) // 667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高 |
|
|
|
//绘制左下角文字 |
|
|
|
context.fontSize = 12; |
|
|
|
context.fillStyle = '#333'; |
|
|
|
context.textAlign = 'left'; |
|
|
|
context.fillText("长按识别小程序~", 10, 520); |
|
|
|
context.stroke(); |
|
|
|
// 图片对象 |
|
|
|
const image = canvas.createImage() |
|
|
|
image.src = '/static/images/share_bg.png' |
|
|
|
// 图片对象 |
|
|
|
const imageQR = canvas.createImage() |
|
|
|
imageQR.src = this.imageQR |
|
|
|
image.onload = () => { |
|
|
|
// 将图片绘制到 canvas 上 |
|
|
|
context.drawImage(image, 0, 0, 350, 450) |
|
|
|
context.drawImage(imageQR, 200, 450, 130, 120) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.showLoad = true |
|
|
|
this.showShare = false |
|
|
|
this.showLayer = false |
|
|
|
}, |
|
|
|
cancel() { |
|
|
|
const canvas = this.canvas; |
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
|
|