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

Question

我已经实现了拖放图像，现在的问题是当我将画布数据转换为 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('');
    });

然后它发送如下数据：

这里 ... 包含 base64 数据。

如果图像是使用拖放上传的，那么我使用以下方法：

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。
那么有没有办法在拖放选项中将数据作为 base 64 而不是图像 url 发送？

http://jsfiddle.net/durga598/w8kkc/414/

Answer 1

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

您需要创建一个图像对象并使用 canvas 元素的 toDataURL 将其转换为 base64 数据。然后使用fabric.Image.fromURL 将该图像数据添加到织物画布。这里更新了fiddle。