Post image data instead of image url in fabric js

Question

I have implemented the Drag n Drop image, now the issue is when i am converting canvas data as toSVG and send it to server it includes the image URL instead of image data.

When user upload the file then i am using below method:

     //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('');
    });

then it sends the data as below:

< 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">

Here ... contains base64 data.

If image is uploaded using Drag n Drop then i am using below method:

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

which sends the data as below:

< 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">

So both type of image uploading is working fine but the issue is i am trying to generate the png file using above svg. So system is able to create png for 1st option but not for 2nd option as its have a URL.
So is there a way to send data as base 64 instead of image url in drag n drop option?

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

Durga Durga · Accepted Answer · 2017-11-27T10:49:29

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

You need to create an image object and convert that to base64 data using toDataURL of canvas element. Then use fabric.Image.fromURL to add that image data to fabric canvas. Here is updated fiddle.

Post image data instead of image url in fabric js

1 Answers