Javascript 将画布转换为html5中的图像后，当前上载的图像未设置在准确位置

我想准确的图像后，从画布转换。我上传多张图片到画布上，上传多张图片后将画布转换成图片，但最后一张图片未固定在所需位置

上传的图像：

单击我之后：

代码：

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（{左：50，上：100，角：00}）。刻度（0.9）；
canvas.add（oImg.renderAll（）；
var a=canvas.setActiveObject（oImg）；
var dataURL=canvas.toDataURL（{格式：'jpeg'，质量：0.8}）；
console.log（“画布图像”+dataURL）；
document.getElementById（'txt'）。href=dataURL；
});
};
reader.readAsDataURL（文件）；
});
画布{
边框：1px纯黑；
}
如果我正确理解此问题的含义

问题

当
上传输入更改时，可以设置
href
属性一次。如果在此之后更改了任何内容，则属性
href
的值不会更改

解决方案

单击链接时从画布获取数据URI，然后生成数据URI并显示正确的图像

完整代码


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（{左：50，上：100，角：00}）。刻度（0.9）；
canvas.add（oImg.renderAll（）；
var a=canvas.setActiveObject（oImg）；
var dataURL=canvas.toDataURL（{格式：'jpeg'，质量：0.8}）；
//console.log（“画布图像”+dataURL）；
//document.getElementById（'txt'）。href=dataURL；
});
};
reader.readAsDataURL（文件）；
});
document.querySelector（'#txt'）.onclick=function（e）{
e、 预防默认值（）；
canvas.deactivateAll（）.renderAll（）；
document.querySelector（'#preview'）.src=canvas.toDataURL（）；
}
画布{
边框：1px纯黑；
}



我看不出问题所在。也许你做了更多你没有告诉我们的步骤。请指定所有步骤（包括“我拖动了第一张图像，然后又上传了一张”等）@Mosh Feu。上传完图片后，我尝试移动到画布中的另一个地方。当我点击时，点击我！！然后上传的图像默认显示在同一位置（不可拖动的位置）。请看上面的两张屏幕截图（汽车图片）。我很高兴。。祝你好运@大多数情况下，我一直拒绝你的标签维基编辑，因为你输入了一个错误：farbic.js。我重新创建了一个正确的标签，并将您的解释复制到该标签中…@ChrisMaes我猜您重新创建了标签
farbic.js
，但我再次仔细检查了这一点，库的名称
fabricjs
，网站是。我（我想）我创建了哪个标签？@Mosh Feu。如果你不介意的话，我还有一个问题。我想从当前上传的图像中删除轮廓（蓝线坐标）。