绘制图片进行保存
如何实现在小程序中绘制图片,并且进行保存?
1.首先淘宝小程序提供了保存图片的对应APi
https://open.taobao.com/docV3.htmspm=a219a.7386797.0.0.4a2e669aRxfOyH&source=search&docId=952&docType=20
my.saveImage
my.saveImage({
url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
showActionSheet: true,
success: () => {
my.alert({
title: '保存成功',
});
},
});
这样做保存的图片是固定的url地址需要放在服务器上的,如果可以替换这段url,让它变为你自己画canvas内容导出生的文件路径。那么就实现了!
2.canvas创建与获取canvas内容的url路径
2.1canvas的创建
淘宝小程序由于不能操作dom,虽然提供一些获取dom元素方法,但依旧很难手写canvas 庆幸的是canvas提供了 canvas的标签 和canvas的一些api
https://miniapp.open.taobao.com/docV3.htmdocId=1006&docType=20&tag=dev#api
需要注意canvas元素一定要写成canvas标签
canvas标签
<canvas id="canvasbox"></canvas>
如果要随便画点东西你可以搜索具体api
https://miniapp.open.taobao.com/docV3.htmdocId=1006&docType=20&tag=dev#api
onReady() {
// 页面加载完成
const ctx = my.createCanvasContext('canvasbox');
ctx.setFontSize(42)
ctx.fillText('Hello', 30, 30)
ctx.fillText('alipay', 200, 200)
ctx.draw()
}
这样一个简单canvas就创建好了
2.2获取canvas内容的url路径
canvas绘制好后拿到url地址是关键,淘宝小程序canvas提供了对应的api可以获取其生成图片的文件路径
https://miniapp.open.taobao.com/docV3.htmdocId=1597&docType=20&tag=dev#ipt
ctx.toTempFilePath
ctx.toTempFilePath({
fileType: "png",
quality: 1,
success: res => {
console.log(res);
this.setData({
imagepath: res.apFilePath,
})
console.log(this.data.imagepath);
},
fail: res => {
// console.log(res);
}
});
3.完成以上操作后,就已经基本实现了绘制图片进行保存
只需要在把保存图片Api里面的url换成动态的即可
具体检测代码
axml代码
<view>
<button type="primary" onTap="handleimage">
保存图片
</button>
</view>
<canvas id="canvasbox"></canvas>
<view>
{{imagepath}}
</view>
js代码
Page({
data: {
imagepath: "",
},
handleimage() {
my.saveImage({
url: this.data.imagepath,
showActionSheet: true,
success: () => {
my.alert({
title: '保存成功',
});
},
});
},
onLoad(query) {
// 页面加载
},
onReady() {
// 页面加载完成
const ctx = my.createCanvasContext('canvasbox');
ctx.setFontSize(42)
ctx.fillText('Hello', 30, 30)
ctx.fillText('alipay', 200, 200)
ctx.draw()
console.log(ctx);
ctx.toTempFilePath({
fileType: "png",
quality: 1,
success: res => {
console.log(res);
this.setData({
imagepath: res.apFilePath,
})
console.log(this.data.imagepath);
},
fail: res => {
// console.log(res);
}
});
},
onShow() {
// 页面显示
},
onHide() {
// 页面隐藏
},
onUnload() {
// 页面被关闭
},
onTitleClick() {
// 标题被点击
},
onPullDownRefresh() {
// 页面被下拉
},
onReachBottom() {
// 页面被拉到底部
},
onShareAppMessage() {
// 返回自定义分享信息
return {
title: 'My App',
desc: 'My App description',
path: 'pages/index/index',
};
},
});