Auto adjust image in canvas, If image resolution is larger than canvas size in Html5

Question

I am using Html5, fabric.js and Java script. I am uploading multiple images in canvas, But sometimes uploaded image larger than canvas. I want image set in fix size.

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: 'png', quality: 0.8});
      console.log("aaaaaaaaaaa" + dataURL);

      //                        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>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

Before upload:

After upload:

I want every image to fix size. After uploading image, user can change the size, angle and other property.

score 0 · Answer 1 · edited Jan 12 '16 at 07:24

0

add height and width of specific size in your code as below.

var oImg = img.set({width: 150, height: 150, left: 50, top: 100, angle: 00}).scale(0.9);

edited Jan 12 '16 at 07:24

Mosh Feu

28,354
16
88
135

answered Jan 12 '16 at 07:20

Gunjal Ray

145
1
13

score -1 · Accepted Answer · answered Jan 12 '16 at 07:20

If I understand the problem correctly, you can resize the image to the size you want by passing those parameters (width and height) to the function img.set.

img.set({... width:100, height:100});

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, width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
      console.log("aaaaaaaaaaa" + dataURL);

      //                        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>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

If you don't mind. I want to ask one question? How to write custom text on this image. — Varun Sharma, Jan 12 '16 at 07:32
Sure. If it's about this question. If not, please ask a new question and paste her link here and I will see it. A new question will be helpful to other people with a similar problem. — Mosh Feu, Jan 12 '16 at 07:35
ok. but i have no idea about custom text. But i will try and ask the new question. — Varun Sharma, Jan 12 '16 at 07:38
Please check this link. http://stackoverflow.com/questions/34739645/write-custom-text-on-image-canvas-with-fabric-js-and-html5 — Varun Sharma, Jan 12 '16 at 09:20
Could you see this link.. https://stackoverflow.com/questions/47988896/how-to-add-time-picker-in-datepicker-html-javascript?noredirect=1#comment82946620_47988896 — Varun Sharma, Dec 27 '17 at 11:44

Auto adjust image in canvas, If image resolution is larger than canvas size in Html5

2 Answers2