使用 FebricJs 并输出到 DataURL

Question

我在您的网站上找到了一段代码，它使用 FebricJs 将图像加载到浏览器中。然后你可以扭曲它并调整它的大小并将它的 base64 传递给输出。加载顺利，我编辑了它的大小，当我点击中的输出时，显示的是原始图像，没有任何变化。 https://jsfiddle.net/sujitkm/p51zwL50/ 我没有使用过这个脚本，请帮助我理解为什么会这样？我想在canvas.toDataURL()中获取修改后的图片。谢谢

 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);
                         oImg.setCoords();
                    var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });
                                                canvas.renderAll();
     console.log("Canvas Image " + dataURL);
                document.getElementById('txt').href=dataURL;
});
                 };
                reader.readAsDataURL(file);  
               
                
            });

Answer 1

href中有旧的url，是在添加对象到canvas时设置的，对象转换后没有改变。这就是为什么有旧形象的原因。为此，您需要使用 doc 的火焰。我准备了代码，它有效：

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

canvas.on('object:modified', () => {
  const dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });

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

使用 FebricJs 并输出到 DataURL

Working with FebricJs and outputting toDataURL

fabricjs