post() {
var that = this
uni.showLoading({
title: '保存中'
});
const context = uni.createCanvasContext('firstCanvas')
context.drawImage('http://xxxx.com/xxx.png',0, 0, 375, 473) //这是背景图片
context.drawImage(that.img, 87.5, 150, 200, 200) //这是二维码
context.save()
context.beginPath()
context.arc(44, 350, 25, 0, 2 * Math.PI)
context.clip()
context.restore()
context.draw()
setTimeout(function(){
uni.canvasToTempFilePath({
x: 0,
y: 0,
// width: 375,
// height: 473,
// destWidth: 700,
// destHeight: 1000,
canvasId: 'firstCanvas',
success: function(res) {
console.log(res.tempFilePath)
uni.hideLoading()
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(red) {
uni.showToast({
title: '保存相册成功'
})
},
fail(res) {
console.log(res)
if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
uni.showModal({
title: '您需要授权相册权限',
success(res) {
if (res.confirm) {
uni.openSetting({
success(res) {
},
fail(res) {
console.log(res)
}
})
}
}
})
}
}
});
},
fail(res) {
uni.hideLoading()
}
}, this)
},4000)
}
- 发布:2021-02-05 15:25
- 更新:2021-02-18 15:14
- 阅读:696
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 20H2 19042.746
HBuilderX类型: 正式
HBuilderX版本号: 3.0.7
手机系统: Android
手机系统版本号: Android 10
手机厂商: 小米
手机机型: redmik30 pro
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
详见上面的示例
const context = uni.createCanvasContext('firstCanvas')
context.drawImage('http://xxxx.com/xxx.png',0, 0, 375, 473)
context.drawImage(that.img, 87.5, 150, 200, 200)
context.save()
context.beginPath()
context.arc(44, 350, 25, 0, 2 * Math.PI)
context.clip()
context.restore()
context.draw()
uni.canvasToTempFilePath({canvasId: 'firstCanvas',})
详见上面的示例
const context = uni.createCanvasContext('firstCanvas')
context.drawImage('http://xxxx.com/xxx.png',0, 0, 375, 473)
context.drawImage(that.img, 87.5, 150, 200, 200)
context.save()
context.beginPath()
context.arc(44, 350, 25, 0, 2 * Math.PI)
context.clip()
context.restore()
context.draw()
uni.canvasToTempFilePath({canvasId: 'firstCanvas',})
预期结果:
用canvasToTempFilePath 保存 canvas绘制的图片,保存到相册,应该正常显示才对
用canvasToTempFilePath 保存 canvas绘制的图片,保存到相册,应该正常显示才对
实际结果:
用canvasToTempFilePath 保存 canvas绘制的图片,保存到相册,保存到相册是空白的
用canvasToTempFilePath 保存 canvas绘制的图片,保存到相册,保存到相册是空白的
bug描述:
最新的hbuilderX, 版本号是:3.0.7.20210123
打包出来的app, canvas 绘制图片,保存的图片是空白的图片
3***@qq.com (作者)
新版已经ok了,新版本中ok的
请关注一下这个问题:https://ask.dcloud.net.cn/question/110858
2021-02-21 18:30
DCloud_UNI_GSQ
回复 3***@qq.com: 收到
2021-02-22 10:55