let _this = this;
uni.showLoading({
title: '海报图生成中……',
mask: true
})
let {
posterCanvasId,
qrcodeSize,
posterHeight,
posterBgUrl,
info
} = _this
let {
newNickName,
aid
} = info
newNickName = newNickName.trim()
if (newNickName.length > 9) {
newNickName = newNickName.substring(0, 9) + '…'
}
let poster_width = uni.upx2px(1500)
let poster_height = uni.upx2px(2668)
let head_x = uni.upx2px(240)
let head_y = uni.upx2px(2450)
let head_r = uni.upx2px(130)
let qrcode_x = uni.upx2px(1050)
let qrcode_y = uni.upx2px(2290)
let qrcode_size = uni.upx2px(qrcodeSize)
let text_x = uni.upx2px(250 + 150)
let text_y = uni.upx2px(2440)
let text_size = uni.upx2px(65)
let line_x = uni.upx2px(440)
let line_y = uni.upx2px(2460)
let line_w = uni.upx2px(300)
let line_h = uni.upx2px(80)
let tips_x = uni.upx2px(350)
let tips_y = uni.upx2px(2560)
let tips_w = uni.upx2px(600)
let tips_h = uni.upx2px(120)
let nameSize = uni.upx2px(60)
let idSize = uni.upx2px(55)
let tipsSize = uni.upx2px(58)
const poster = uni.createCanvasContext(posterCanvasId)
poster.drawImage(posterBgUrl, 0, 0, poster_width, poster_height)
poster.drawImage(qrcode, qrcode_x, qrcode_y)
poster.setStrokeStyle('#FFCC00')
poster.setFillStyle('#000')
poster.setFontSize(nameSize)
poster.setTextAlign('left')
poster.fillText(newNickName, text_x, text_y - text_size)
poster.setStrokeStyle('#000')
poster.beginPath()
poster.setLineCap('round')
poster.setLineWidth(line_h)
poster.moveTo(line_x, line_y)
poster.lineTo(line_x + line_w, line_y)
poster.stroke()
poster.setFillStyle('#fff')
poster.setFontSize(idSize)
poster.fillText(aid, line_x + uni.upx2px(15), line_y + idSize / 2.4)
poster.setFontSize(tipsSize)
poster.setFillStyle('#333')
poster.fillText('长按识别二维码', text_x, tips_y + tipsSize / 2.4)
poster.arc(head_x, head_y, head_r, 0, 2 * Math.PI)
poster.clip()
poster.drawImage(headFile, head_x - head_r, head_y - head_r, head_r * 2, head_r * 2);
poster.draw(false, () => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: poster_width,
height: poster_height,
destWidth: poster_width,
destHeight: poster_height,
canvasId: posterCanvasId,
fileType:'jpg',
success: function(res) {
uni.hideLoading()
_this.$emit('posterStr', {
image: res.tempFilePath,
title: posterCanvasId
})
},
fail: function(err) {
uni.hideLoading()
_this.$msg(`生成失败,失败原因:${err.errMsg}`)
console.log(err);
}
})
})
- 发布:2020-12-22 17:47
- 更新:2020-12-24 13:42
- 阅读:842
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
HBuilderX类型: 正式
HBuilderX版本号: 2.9.8
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: meta30
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
poster.draw(false, () => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: poster_width,
height: poster_height,
destWidth: poster_width,
destHeight: poster_height,
canvasId: posterCanvasId,
fileType:'jpg',
success: function(res) {
uni.hideLoading()
_this.$emit('posterStr', {
image: res.tempFilePath,
title: posterCanvasId
})
},
fail: function(err) {
uni.hideLoading()
_this.$msg(`生成失败,失败原因:${err.errMsg}`)
console.log(err);
}
})
poster.draw(false, () => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: poster_width,
height: poster_height,
destWidth: poster_width,
destHeight: poster_height,
canvasId: posterCanvasId,
fileType:'jpg',
success: function(res) {
uni.hideLoading()
_this.$emit('posterStr', {
image: res.tempFilePath,
title: posterCanvasId
})
},
fail: function(err) {
uni.hideLoading()
_this.$msg(`生成失败,失败原因:${err.errMsg}`)
console.log(err);
}
})
实际结果:
poster.draw(false, () => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: poster_width,
height: poster_height,
destWidth: poster_width,
destHeight: poster_height,
canvasId: posterCanvasId,
fileType:'jpg',
success: function(res) {
uni.hideLoading()
_this.$emit('posterStr', {
image: res.tempFilePath,
title: posterCanvasId
})
},
fail: function(err) {
uni.hideLoading()
_this.$msg(`生成失败,失败原因:${err.errMsg}`)
console.log(err);
}
})
poster.draw(false, () => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: poster_width,
height: poster_height,
destWidth: poster_width,
destHeight: poster_height,
canvasId: posterCanvasId,
fileType:'jpg',
success: function(res) {
uni.hideLoading()
_this.$emit('posterStr', {
image: res.tempFilePath,
title: posterCanvasId
})
},
fail: function(err) {
uni.hideLoading()
_this.$msg(`生成失败,失败原因:${err.errMsg}`)
console.log(err);
}
})
bug描述:
个别手机画布保存图片失败,错误:
canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
zhu_zhu
HBuilderX 2.9.8 遇到过同样的问题,正式版还没有新版本,换成alpha版本就没有这个问题了
2020-12-24 13:45
9***@qq.com (作者)
回复 zhu_zhu: 是的
2021-01-06 11:03