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

Question

我想要从画布转换后的精确图像。我正在使用Fabric.js 将多张图片上传到画布中，上传多张图片后将画布转换为图片，但最后一张图片未固定在所需位置。

上传图片：

点击我之后：

代码：

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });

      console.log("Canvas Image " + dataURL);
      document.getElementById('txt').href=dataURL;
    });
  };
  reader.readAsDataURL(file);  
});

canvas{
  border: 1px solid black;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas" width="750" height="550"></canvas>
<input type="file" id="file">
<a href="" id="txt">Click Me!!</a>

请检查 JSFiddle： https://jsfiddle.net/varunPes/8gt6d7op/5/

请给我一些想法。

Answer 1

如果我正确理解了这个问题..

问题

当upload input 更改时，您设置一次href 属性。如果在此之后您更改任何内容，href 属性的值不会更改。

解决方案

单击链接时从画布中获取 dataURI，然后生成 dataURI 并显示正确的图像。

完整代码

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });

      //console.log("Canvas Image " + dataURL);
      //document.getElementById('txt').href=dataURL;
    });
  };
  reader.readAsDataURL(file);  
});

document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
}

canvas{
  border: 1px solid black;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas" width="750" height="550"></canvas>
<input type="file" id="file">
<a href="#" id="txt">Click Me!!</a>
<br />
<img id="preview" />

注意：点击“点击我！！”后我在页面底部显示图像，而不是将用户重定向到图像“页面”。这样您就可以轻松查看更改，而无需每次都重新加载页面。

更新：

现在在导出图像之前的 sn-p 中，该功能使 canvas 内的所有元素停用，以便它们的边框将被移除。感谢：How to remove borders and corners from Canvas object? [Fabric.js]