cocos creator动态生成image并绘制到canvas中
程序员文章站
2022-03-21 14:01:18
...
如果需要将图片绘制到canvas中,则需要创建image对象,然后把本地的图片地址赋值给src,待图片加载成功后,使用drawImage即可
const img = new Image();
img.onload = function () {
// 安卓性能稍差点的手机,绘制image可能有些延迟,避免分享图片底图为空白,
// 分享操作放到回调中
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 500, 400);
Log.I("-------------图片加载成功,绘制到cnavas结束");
};
img.onerror = function () {
Log.E(`-------------分享背景图图片加载失败path:${res.tempFilePath}`);
};
img.src = tempFilePath;
这里需要注意两点:
- tempFilePath一定要是相对于项目的根目录的绝对路径,如果是用wx.downloadFile
下载的图片,则直接使用res.tempFilePath即可,如果是使用savefile保存到本地的图片,则一定
要以wx.env.USER_DATA_PATH开头的路径 - drawImage最好在 img.onload 的回调中,否则部分性能不怎么好的手机,会导致图片绘制失败