由于javascript冲突，无法上载图像

我们提供了一个使用以下代码上传图像的选项：，工作正常

后来我们决定显示一些画布图像，因此我们使用：

现在我合并了这两个代码，如下所示：jsfiddle.net/r22oka49/[或下面的代码片段]，我现在无法上传图像

var canvas=newfabric.canvas（'canvas'）；
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
reader.onload=函数（f）{
var数据=f.target.result；
fabric.Image.fromURL（数据、函数（img））{
//var oImg=img.set（{左：0，上：0，角：00，宽：100，高：100}）。比例（0.9）；
var oImg=img.set（{left:0，top:0，angle:00，width:canvas.getWidth（），height:canvas.getHeight（）}）；
canvas.add（oImg.renderAll（）；
var a=canvas.setActiveObject（oImg）；
var dataURL=canvas.toDataURL（{格式：'png'，质量：0.8}）；
});
};
reader.readAsDataURL（文件）；
});
var img=新图像（）；
img.onload=函数（）{
//装载后牵引
canvas=document.getElementById（'case_canvas'）；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0，0，img.naturalWidth，img.naturalHeight）；
}
img.src=”http://i.stack.imgur.com/xgNw7.png";
//^^这将开始加载图像

/*.canvas容器{
背景：url（“http://i.stack.imgur.com/xgNw7.png）无重复固定中心；
}
*/
#帆布
{
边框：1px纯黑；
}

在覆盖结构画布的

img.onload（）

中缺少

var

img.onload = function() {
  //draw after loading
  var canvas = document.getElementById('case_canvas');
  //^^ create local variable instead of using the global one
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}

---

在覆盖结构画布的

img.onload（）

中缺少

var

img.onload = function() {
  //draw after loading
  var canvas = document.getElementById('case_canvas');
  //^^ create local variable instead of using the global one
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}