在将画布转换为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

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

问题

href更改后，您可以设置一次upload input属性。如果在此之后您更改了任何内容，则href属性的值不会发生变化。

解决方案

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

完整代码

＆＃13;

＆＃13;

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();
}

＆＃13;

canvas{
  border: 1px solid black;
}

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

注意：点击＆＃34;点击我!!＆＃34;我在页面底部显示图像，而不是将用户重定向到图像＆＃34;页面＆＃34;。通过这种方式，您可以轻松查看更改，并且无需每次都重新加载页面。

<强>更新

现在，在导出图像之前的代码段中，该函数会使canvas内的所有元素都停用，以便其边框将被删除。感谢：How to remove borders and corners from Canvas object? [Fabric.js]