淘宝小程序绘制图片并保存

绘制图片进行保存

如何实现在小程序中绘制图片，并且进行保存？

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',
    };
  },
});