Question

我已经实现了Drag n Drop图像，现在的问题是当我将画布数据转换为SVG并将其发送到服务器时它包含图像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('');
    });

然后它发送如下数据：

＆LT; image xmlns：xlink =“http://www.w3.org/1999/xlink”xlink：href =“data：image / gif; base64，...”x =“ - 100”y =“ - 100”style =“stroke：rgb（240,240,240）; stroke-width：0; stroke-dasharray：none; stroke-linecap：butt; stroke-linejoin：miter; stroke-miterlimit：10; fill：rgb（0,0,0）; fill-opacity：0; fill-rule：nonzero; opacity：1;“ width =“200”height =“200”＆gt;

此处...包含base64数据。

如果使用Drag n Drop上传图像，那么我使用以下方法：

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

发送数据如下：

＆LT; image id =“verified_image”xmlns：xlink =“http://www.w3.org/1999/xlink”xlink：href =“http：//localhost/lynkus/uploads/userprofile/verified_image.png”x =“ - 256“y =” - 256“style =”stroke：none; stroke-width：0; stroke-dasharray：none; stroke-linecap：butt; stroke-linejoin：miter; stroke-miterlimit：10; fill：rgb（0 ，0,0）; fill-rule：nonzero; opacity：1;“ width =“512”height =“512”＆gt;

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

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。

在结构js中发布图像数据而不是图像URL

1 个答案: