Imagemagick 在fabric js中发布图像数据而不是图像url

我已经实现了拖放图像，现在的问题是当我将画布数据转换为toSVG并将其发送到服务器时，它包含图像URL而不是图像数据

当用户上传文件时，我使用以下方法：

     //Add photo in canvas
    document.getElementById('add_image').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: 0,
                    top: 0,
                    angle: 0,
                    border: '#000',
                    stroke: '#F0F0F0', //<-- set this
                    strokeWidth: 0, //<-- set this
                    fill: 'rgba(0,0,0,0)'
                }).scale(0.2);
                canvas.add(oImg).renderAll();
                canvas.moveTo(oImg, z_index);
                z_index = z_index + 1;
                //var a = canvas.setActiveObject(oImg);
                var dataURL = canvas.toDataURL({
                    format: 'png',
                    quality: 1
                });
            });
        };
        reader.readAsDataURL(file);
        $(this).val('');
    });

var new_image = new fabric.Image(obj, {
    width: obj.naturalWidth,
    height: obj.naturalHeight,
    scaleX: setImageWidth/obj.naturalWidth,        
    scaleY: setImageHeight/obj.naturalHeight,
    // Set the center of the new object based on the event coordinates relative
    // to the canvas container.
    left: e.layerX,
    top: e.layerY,
    id: 'verified_image'
});
canvas.add(new_image);
canvas.renderAll();

其发送数据如下所示：

所以这两种类型的图像上传都可以正常工作，但问题是我正在尝试使用上面的svg生成png文件。因此，系统可以为第一个选项创建png，但不能为第二个选项创建png，因为它有一个URL。
那么，在拖放选项中，有没有一种方法可以将数据作为base64而不是图像url发送

您需要创建一个图像对象，并使用canvas元素的toDataURL将其转换为base64数据。然后使用

fabric.Image.fromURL

将图像数据添加到fabric画布。这里有更新

---

您需要创建一个图像对象，并使用canvas元素的toDataURL将其转换为base64数据。然后使用

fabric.Image.fromURL

将图像数据添加到fabric画布。更新内容如下。

超出了这个问题的范围：如何在服务器端创建可打印的svg（支持所有字体、背景等）？@DS9从未遇到过，如果我能找到任何东西，请告诉您；）超出了这个问题的范围：如何在服务器端创建可打印的svg（支持所有字体、背景等）？@DS9从未遇到过这一点，如果我能找到什么，我会告诉你；）

function handleDrop(e) {
  // this / e.target is current target element.
  e.preventDefault();
  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }

  var img = document.querySelector('#images img.img_dragging');

  var setImageWidth = 100,
    setImageHeight = 100;
  var imgObj = new Image();
  imgObj.crossOrigin = 'Anonymous';
  imgObj.onload = function(oImg) {
    var tempCanvas = document.createElement('CANVAS');
    var tempCtx = tempCanvas.getContext('2d');
    var height = tempCanvas.height = this.naturalHeight;
    var width = tempCanvas.width = this.naturalWidth;
    tempCtx.drawImage(this, 0, 0);
    var dataURL = tempCanvas.toDataURL();
    fabric.Image.fromURL(dataURL, function(img) {
      img.set({
        width: width,
        height: height,
        scaleX: setImageWidth / width,
        scaleY: setImageHeight / height,
        left: e.layerX,
        top: e.layerY,
      })
      canvas.add(img);
    })
  }
  imgObj.src = img.src;
  return false;
}