无效的图像 src 错误答案

【问题标题】：Invalid image src error无效的图像 src 错误
【发布时间】：2014-04-09 13:45:17
【问题描述】：

var nodeIconImg = new Image();
nodeIconImg.onload = function () {

    var nodeIcon = new Kinetic.Image({
        image: nodeIconImg,
        width: 30,
        height: 30
    });
}

var url = '<?= $baseurl; ?>/img/' + node.main_photo;
nodeIconImg.src = url;

这是 kinetic.js 中发生错误的核心代码行（恰好在 drawImage 方法中）：

drawImage: function () {
    var a = arguments,
        b = this._context;
    3 === a.length ? b.drawImage(a[0], a[1], a[2]) : 5 === a.length ? b.drawImage(a[0], a[1], a[2], a[3], a[4]) : 9 === a.length && b.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8])
}

错误信息是：

Uncaught InvalidStateError: 试图使用一个对象不可用或不再可用。

有什么想法吗？有人遇到过这个问题吗？

【问题讨论】：

标签： javascript html kineticjs

【解决方案1】：

onload 函数完成后，您的 nodeIcon 不在作用域内。

所以稍后在您的代码中尝试使用 nodeIcon 时，它不再被定义并引发错误。

您需要在 onload 函数之外声明var nodeIcon

var nodeIcon;

var nodeIconImg = new Image();
nodeIconImg.onload = function () {

    nodeIcon = new Kinetic.Image({
        image: nodeIconImg,
        width: 30,
        height: 30
    });

}
var url = "ship.png";
nodeIconImg.src = url;

或者将nodeIcon添加到onload函数内的一个层

var nodeIconImg = new Image();
nodeIconImg.onload = function () {

    var nodeIcon = new Kinetic.Image({
        image: nodeIconImg,
        width: 30,
        height: 30
    });
    layer.add(nodeIcon);
    layer.draw();

}
var url = "ship.png";
nodeIconImg.src = url;

【讨论】：