Preserve original quality of image on canvas

Question

I am using fabric.js. I am uploading multiple image in canvas. After uploading the image. Then canvas is converting into image by toDataURL(). I want to paste this converted image on a T-Shirt having size of 2000x2000. But this image is of small size and when I try to increase its size it is getting blurred due to stretching

I need image of same size what user has uploaded, instead of a scaled up version from a scaled down image. E.g, if user uploaded an image of size 1500x1500 then from canvas I need image of size 2000x2500 only instead of 400x400.

I have seen 99Thsirts.com website but I don't have any idea how to handle passport size image.

I want only clean Uploaded customize image (not blurred) because I'm implementing customize T-shirt.

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;  
    var img = document.createElement('img');
    img.src = data;
    img.onload = function () {
      if (img.width < 1000 || img.height < 1000)
      {
        alert("upload image should be greater then 1000px*1000px");
        canvas.getActiveObject().remove();
      }
    };

    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100,width:100, height: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="400" height="400"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

https://jsfiddle.net/varunPes/8gt6d7op/21/

Please share your ideas.

Answer 1

If you resize the image to 100x100 pixels, then you will have a 100x100 image. Do not change width and height of your image when you load it. Also there is no reason to use a image onload function and an imageFromURL function.

Said so, load your image, scale it to a width of 90px ( now you are doing 100 and scale of 0.9 so is 90px), place it on canvas.

The canvas is 400px, when you will export it you will specify a multiplier of 5 to get a 2000px canvas. The image will be stretched without loosing its original resolution. It will not improve over its standard resolution of course.

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;  
    var img = document.createElement('img');
    img.onload = function () {
      if (img.width < 1000 || img.height < 1000)
      {
        alert("upload image should be greater then 1000px*1000px");
        return;
      }
      var oImg = new fabric.Image(img);
      var oImg = oImg.set({left: 50, top: 100, angle: 00}).scaleToWidth(90);
      canvas.add(oImg);
      canvas.setActiveObject(oImg);
    };
    img.src = data;
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll();
  document.querySelector('#preview').src = canvas.toDataURL({multiplier: 5});
}

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="400" height="400"></canvas>
<a href='' id='txt' target="_blank">Export me 5x Bigger ( 400x5=2000)</a>
<br />
<img id="preview" />