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

Question

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

上传图片：

点我后:

代码：

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 的值不会更改。

解决方法

当您单击 link 时，从 canvas 获取 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" />

注意： 在您点击 "Click Me!!" 之后，我会在页面底部显示图像，而不是将用户重定向到图像 "page"。这样您就可以很容易地看到变化，而不需要每次都重新加载页面。

更新：

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

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

Current uploaded image not set on exact position after converted canvas into image in html5

html

javascript

css

canvas

fabricjs