收藏
回答

新canvas接口的drawImage方法怎么用?

目前知道新canvas获取的context是canvasRendertingContext2D,其drawImage方法要求传入一个HTML的img节点,所以直接传入url会报错,查询文档后发现canvas.createImage()可以创建图片对象,实测也确实打印出了<img>,但是给创建好的img添加src后传入drawImage()中没有反应,也不报错,就是啥都不显示,不知道是怎么回事,往大佬指点。代码如下:

/*----------wxml-------------*/

<canvas id="sharePic" type="2d"></canvas>

/*-----------js--------------*/

onLoad: async function (options) {

    //将图片的fileID换成真实url

   var result = await wx.cloud.getTempFileURL({

      fileList:[options.url]

      })

      console.log(result);

    var url = result.fileList[0].tempFileURL;

    //选择画布

    var query = wx.createSelectorQuery();

    query.select('#sharePic').node().exec(res=>{

    console.log(res);

      var shareCanvas = res[0].node;

      var ctx = shareCanvas.getContext('2d');

      //创建图片对象

      var img = shareCanvas.createImage();

      img.src = url;

      console.log(img)

      //画图,但是没反应

      ctx.drawImage(img,25,10,300,300); 

    }); 

  },

回答关注问题邀请回答
收藏

1 个回答

  • Mr.Zhao
    Mr.Zhao
    2020-02-29
    img.onload = function () {
      ctx.draw
    }
    
    2020-02-29
    有用
    回复 27
    • leo
      leo
      2020-02-29
      确实是这样,非常感谢
      2020-02-29
      回复
    • leo
      leo
      2020-02-29
      大佬,再请问一下,编辑器里可以正常运行,但是手机上drawImage无效是怎么回事呢,代码基本还是刚才的,只不过加上了图片onload事件以及在前面设置了一下canvas的dpr,电脑上运行正常的
      2020-02-29
      回复
    • Mr.Zhao
      Mr.Zhao
      2020-02-29回复leo
      你写个示例代码片段,我看下
      2020-02-29
      回复
    • leo
      leo
      2020-02-29
      https://developers.weixin.qq.com/s/Nu0AHvmq7WfC
      2020-02-29
      回复
    • leo
      leo
      2020-02-29
      麻烦您看下
      2020-02-29
      回复
    查看更多(22)
登录 后发表内容
问题标签