<template>
<view>
<view style="width: 100%;height: 100%">
<canvas style="width: 345rpx;height: 494rpx;" canvas-id="myCanvas"></canvas>
</view>
<button @click="save">保存</button>
</view>
</template>
<script>
let ctx =''
export default {
data() {
return {
}
},
onLoad() {
},
onReady(){
ctx = uni.createCanvasContext('myCanvas');
this.drawShareImage();
},
methods: {
drawShareImage(){//绘画canvas
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
ctx.draw()
},
save(){
let _this = this;
uni.canvasToTempFilePath({
canvasId:'myCanvas',
width: 690,
height: 989,
success(e) {
console.log(e,'--canvasToTempFilePath')
uni.saveImageToPhotosAlbum({
filePath: e.tempFilePath,
success(res) {
_this.toast('保存成功');
},
fail(res){
console.log(res)
}
})
},
fail(res){
}
})
}
}
}
</script>
皇上的第八子
- 发布：2021-01-11 00:35
- 更新：2021-01-11 11:28
- 阅读：2246
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS Catalina 10.15.2 Beta版(19C56a)
HBuilderX类型： Alpha
HBuilderX版本号： 3.0.7
手机系统： iOS
手机系统版本号： IOS 14
手机厂商： 苹果
手机机型： iPhone X
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击‘保存’按钮
点击‘保存’按钮
预期结果：
把canvas保存一张有红色内容的图片
把canvas保存一张有红色内容的图片
实际结果：
内容是空白的
内容是空白的
bug描述：
标准基座，运行到手机，保存canvas的图片为空白的
9***@qq.com - 初十啊
我这用canvas画出来之后再这样生成，再用存的临时路径canvasImgCon 去保存图片
//开始绘画，必须调用这一步，才会把之前的一些操作实施
myCanvas.draw(true, () => {
uni.canvasToTempFilePath({
canvasId: 'posterCanvas',
success: (res) => {
// 在H5平台下，tempFilePath 为 base64
// console.log(res.tempFilePath)
that.canvasImgCon = res.tempFilePath;
uni.hideLoading();
},
fail: () => {
uni.showToast({
title: '名片加载失败',
duration: 2000
});
}
});
});
