问题:
小程序组件canvas使用type="2d"后 无法正常触发tt.canvasToTempFilePath
解决方案:
方案1.CanvasV2组件通过tt.getFileSystemManager().writeFileSync保存到本地
方案2.将CanvasV2组件内容通过图片的方式绘制到CanvasV1组件再使用t.canvasToTempFilePath获取数据
js部分
// 方案1
async getCanvasImgPath() {
// 获取当前canvasV2组件 base64图片数据
const base46Data = await this.getBase46Img("canvas_v2")
// 获取图片地址
const filePath = this.getImgFile(base46Data)
return filePath
},
getImgFile(base46Data) {
// 把canvas转换base64数据
let filePath = `${tt.env.USER_DATA_PATH}/demo.png`;
const data = tt.base64ToArrayBuffer(base46Data.replace(/^data:image\/\w+;base64,/, ''))
tt.getFileSystemManager().writeFileSync(filePath, data)
return filePath
},
// 方案2
async getCanvasImgPath2() {
// 获取当前canvasV2组件 base64图片数据
const base46Data = await this.getBase46Img("canvas_v2")
// 绘制canvasV1图片
await this.drawImage("canvas_v1", base46Data)
// 获取图片地址
const filePath = await this.getTempFilePath("canvas_v1")
return filePath
},
getBase46Img(id) {
return new Promise(resolve => {
tt.createSelectorQuery()
.select(`#${id}`)
.node()
.exec(async (res) => {
const canvas = res[0].node;
const ctx2 = canvas.getContext('2d');
// 获取base64图片
const base46Data = ctx2.canvas.toDataURL()
resolve(base46Data)
});
})
},
drawImage(id, base46Data) {
return new Promise(resolve => {
const ctx = tt.createCanvasContext(id);
// canvasV1绘制图片
ctx.drawImage(
base46Data, 0, 0, 200, 100
);
ctx.draw(false, () => {
resolve()
})
})
},
getTempFilePath(id) {
return new Promise (resolve => {
tt.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 225,
destWidth: 300,
destHeight: 225,
canvasId: id,
success: (res) => {
// 获取文件地址
resolve(res.tempFilePath)
},
});
})
},
ttml部分
<view class="container">
<view class="canvas-item">
<!-- v1组件 -->
<canvas
canvas-id="canvas_v1"
></canvas>
</view>
<view class="canvas-item">
<!-- v2组件 -->
<canvas
id="canvas_v2"
canvas-id="canvas_v2"
type="2d"
></canvas>
</view>
</view>