Javascript 下划线'；等质量罐'；无法区分两幅图像

我的应用程序使用了

Backbone.js

，在捕捉图像上的更改事件时遇到了一些问题，因为它使用

下划线.js

//主干初始化。
var Model=Backbone.Model.extend({
默认值：{
图像：空
},
初始化：函数（）{
this.listenTo（this'change'，this.handleChange）；
},
handleChange：功能（模型）{
var changes=this.changedAttributes（）；
如果（更改）{
for（变化中的var k）{
console.log（模型中的k+'已更改'），this.get（k））；
}
}
}
});
var testModel=新模型（）；
log（testModel.get（'image'）；
//测试变更工作
testModel.set（'testval'，1）；
testModel.set（'testval'，2）；
var canvas=document.querySelector（'#testCanvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle='黑色'；
ctx.fillRect（0,0,50,50）；
var canvas2=document.querySelector（'testCanvas2'）；
var ctx2=canvas2.getContext（'2d'）；
ctx2.fillStyle='红色'；
ctx2.fillRect（0,0,300,50）；
var image1=新图像（）；
var image2=新图像（）；
image1.onload=函数（）{
document.querySelector（“#test”）.appendChild（图1）；
//骨干
testModel.set（'image'，image1）；
image2.onload=函数（）{
document.querySelector（“#test”）.appendChild（图2）；
testModel.set（'image'，image2）；//这不会触发
log（“使用isEqual:，0.isEqual（image1，image2））；
log（“Use==：”，image1==image2）；
log（“Use===：”，image1===image2）；
};
image2.src=canvas2.toDataURL（）；
};
image1.src=canvas.toDataURL（）
您可以覆盖
。.isEqual
以自定义如何处理
图像的实例：

(function() {
    var _equal = _.isEqual;
      _.isEqual = function(a, b) {
        if ((a instanceof Image) && (b instanceof Image))
            return a.src === b.src;
        else
            return _equal(a, b);
      };
}());


（函数（）{
var _equal=u.isEqual；
_.isEqual=函数（a，b）{
if（（图像的a实例）和&（图像的b实例））
返回a.src==b.src；
其他的
返回_等于（a，b）；
};
}());
//主干初始化。
var Model=Backbone.Model.extend({
默认值：{
图像：空
},
初始化：函数（）{
this.listenTo（this'change'，this.handleChange）；
},
handleChange：功能（模型）{
var changes=this.changedAttributes（）；
如果（更改）{
for（变化中的var k）{
console.log（模型中的k+'已更改'），this.get（k））；
}
}
}
});
var testModel=新模型（）；
log（testModel.get（'image'）；
//测试变更工作
testModel.set（'testval'，1）；
testModel.set（'testval'，2）；
var canvas=document.querySelector（'#testCanvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle='黑色'；
ctx.fillRect（0,0,50,50）；
var canvas2=document.querySelector（'testCanvas2'）；
var ctx2=canvas2.getContext（'2d'）；
ctx2.fillStyle='红色'；
ctx2.fillRect（0,0,300,50）；
var image1=新图像（）；
var image2=新图像（）；
image1.onload=函数（）{
document.querySelector（“#test”）.appendChild（图1）；
//骨干
testModel.set（'image'，image1）；
image2.onload=函数（）{
document.querySelector（“#test”）.appendChild（图2）；
testModel.set（'image'，image2）；//这不会触发
log（“使用isEqual:，0.isEqual（image1，image2））；
log（“Use==：”，image1==image2）；
log（“Use===：”，image1===image2）；
};
image2.src=canvas2.toDataURL（）；
};
image1.src=canvas.toDataURL（）

您能否举例说明主干网如何看不到变化？您是否可以更改img上的另一个属性？@k-nut添加了主干示例。您是否可以不在模型中设置
image
，而是像这样存储img src<代码>testModel.set（'image'，image2.src）我想我会把它作为最后的手段，因为这样会进入一些遗留代码，这可能会影响应用程序的很多部分，因为该图像被广泛用于计算其他东西。我明天晚些时候要测试它，看看它是否解决了问题，但会使另一部分崩溃。哈哈，无论如何，赞赏地向上投票。