在组件中调用createCanvasContext后ctx.draw画不出来（vue3和uniapp和微信小程序）

最新推荐文章于 2024-09-05 14:22:10 发布

Technology_hands

最新推荐文章于 2024-09-05 14:22:10 发布

阅读量372

点赞数 3

文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/technology_hands/article/details/140772371

版权

我原来在页面中直接写，是可以直接画出来的,是没问题的，然后我把他放到组件中以后就不行了

const CTX = uni.createCanvasContext(CanvansID);
      CTX.drawImage(
        tempImagePath,
        nameStartX,
        nameStartY,
        nameCutWidthValue,
        nameCutHeightValue,
        0,
        0,
        nameCutWidthValue * 0.5,
        nameCutHeightValue * 0.5
      );
      CTX.draw(true, () => {
        console.log('我是画完的回调')
        // 导出图片的临时路径
        uni.canvasToTempFilePath({
          canvasId: CanvansID,
          success: function(res2) {}
 }, this);

上网查了资料以后，发现 uni.createCanvasContext(CanvansID);在页面中其实默认传了第二个参数this，uni.canvasToTempFilePath也传了this。

那么因为我们是vue3，所以引入this应该是这样。这样就不会报错了！请注意vue3的this，要这样获得，并且他叫proxy，并且上下文和获取临时链接都需要加上proxy

  import {
    getCurrentInstance
  } from 'vue'

  const {
    proxy
  } = getCurrentInstance()

const CTX = uni.createCanvasContext(CanvansID, proxy);

        CTX.draw(true, () => {
          // 导出图片的临时路径
          uni.canvasToTempFilePath({
            canvasId: CanvansID,
            success: function(res2) {

          }, proxy);
        });