Fus*_*ues 5 canvas image meteor
所以我一直在尝试将一些图像加载到流星项目中,在 onRendered 函数上,该函数还包括许多其他确实渲染的东西。
Template.Canvas.onRendered(function() {
this.blues = new Image();
this.blues.src = "bluesh.png";
}
Run Code Online (Sandbox Code Playgroud)
然后在还包含其他一些内容的自动运行函数中,有
this.ctx.drawImage(this.blues, this.dotsPaint[i].xCntr - this.radius, this.dotsPaint[i].yCntr - this.radius, this.radius * 2, this.radius * 2);
Run Code Online (Sandbox Code Playgroud)
当启动并触发绘画代码时,我收到此错误:
控制台错误:无法在canvasrenderingcontext2d上执行drawimage,提供的htmlimageelement处于损坏状态。
我在网上阅读了一些内容并看到了对图像使用 onload 函数的建议,所以我已经完成了
this.blues = new Image();
this.blues.src = "bluesh.png";
this.blues.onload = function () {
this.imageLoadCheck++;
console.log("test");
};
Run Code Online (Sandbox Code Playgroud)
onload 函数从未被触发。图像文件放置在与使用它的文件相同的文件夹中 project/imports/game 我还尝试将图像放置在导入画布代码的 main.js 的同一文件夹中,但这也不起作用。还尝试放置在不同的文件夹中并更改为 /..images/bluesh.png,我尝试将图像代码放置在 template.Canvas.onCreated 而不是 onRendered 上,但没有任何效果。在流星上加载图像有不同的方式吗?我错过了什么吗?
谢谢!
编辑:这是完整的控制台错误:
Exception from Tracker recompute function:
debug.js:41 Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
at Error (native)
at .<anonymous> (localhost:3000/app/app.js?hash=f237cc69921b50eb7ae7894d886737d7ca6557f8:272:18)
at localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1875:20
at Function.Template._withTemplateInstanceFunc (localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3687:12)
at localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1873:29
at Object.Blaze._withCurrentView (localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2214:12)
at viewAutorun (localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1872:18)
at Tracker.Computation._compute (localhost:3000/packages/tracker.js?hash=b605200c15f3a57abb701c7cbc58ca5b0f2802d7:351:36)
at Tracker.Computation._recompute (localhost:3000/packages/tracker.js?hash=b605200c15f3a57abb701c7cbc58ca5b0f2802d7:370:14)
at Object.Tracker._runFlush (localhost:3000/packages/tracker.js?hash=b605200c15f3a57abb701c7cbc58ca5b0f2802d7:535:14)
Run Code Online (Sandbox Code Playgroud)