目前知道新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);
});
},