CODEWITHSUNDEEP
javascriptcsshtmlcanvasfabricjs
Varun Sharma
Varun Sharma

Reputation: 4842

Current uploaded image not set on exact position after converted canvas into image in html5

I want to exact image after converted from canvas. I am uploading multiple image into canvas with Fabric.js, After uploading multiple images converted canvas into image, But last image not fix in desire position.

Uploaded Image:

enter image description here

After click Me: enter image description here

Code:

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);
      var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });

      console.log("Canvas Image " + dataURL);
      document.getElementById('txt').href=dataURL;
    });
  };
  reader.readAsDataURL(file);  
});
canvas{
  border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas" width="750" height="550"></canvas>
<input type="file" id="file">
<a href="" id="txt">Click Me!!</a>

Please check JSFiddle: https://jsfiddle.net/varunPes/8gt6d7op/5/

Please give me some Idea.

Upvotes: 1

Views: 697

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29249

If I understand the this issue correctly..

The problem

You set the href attribute once when the upload input change. If after this you change anything the value of the attribute href doesn't change.

The solution

Get the dataURI from the canvas when you click on the link, then generate the dataURI and show the correct image.

The full code

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);
      var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });

      //console.log("Canvas Image " + dataURL);
      //document.getElementById('txt').href=dataURL;
    });
  };
  reader.readAsDataURL(file);  
});

document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
}
canvas{
  border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas" width="750" height="550"></canvas>
<input type="file" id="file">
<a href="#" id="txt">Click Me!!</a>
<br />
<img id="preview" />

Note: After you click on "Click Me!!" I show the image at the bottom of the page instead of redirect the user to the image "page". In this way you can easily see the changes and don't need to reload the page in each time.

Update:

Now in the snippet before you export the image, the function make all the element inside the canvas deactivate so their border will remove. Thanks to: How to remove borders and corners from Canvas object? [Fabric.js]

Upvotes: 1

Related Questions