Convert canvas into image with fix size in HTML5

Question

I am using HTML5. Right now I am convert canvas into image by toDataURL. But I want to this canvas convert into different size. For example, My canvas size is 450px*450px then it should convert into 1000px*1000px.

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,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, width:1000, height:10000});
      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" />

I tried canvas.toDataUrl({format: 'png', quality: 0.8, width:1000, height:1000}) But it is not works.

DEMO JSFIDDLE. https://jsfiddle.net/varunPes/8gt6d7op/13/

expected Result:

Did you really try height 10,000 as shown (you have ten thousand instead of one thousand)? Not surprised it broke :) — iCollect.it Ltd, Feb 09 '16 at 12:31
@Gone. this is for as example. My motive is canvas convert into image with different size. — Varun Sharma, Feb 09 '16 at 12:40

Mosh Feu · Answer 1 · 2016-02-09T13:34:32.663

1

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

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: 0, top: 0, angle: 00}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});

document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  increaseImg(canvas.toDataURL(), function(dataURL) {
    document.querySelector('#preview').src = dataURL;
  });
}

function increaseImg(src, callback) {
  var n_canvas = $('<canvas width="1800" height="2000" />')[0],
      n_ctx = n_canvas.getContext('2d'),
      n_img = new Image();

  n_img.onload = function() {
    n_ctx.drawImage(n_img, 0, 0, n_canvas.width, n_canvas.height);
    callback(n_canvas.toDataURL());
  }

  n_img.src = src;
}

canvas{
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

edited Feb 09 '16 at 13:34

answered Feb 09 '16 at 12:31

Mosh Feu

28,354
16
88
135

I want to show only 400px*400px canvas but after click on click me then it should convert 1500px*1500px image. – Varun Sharma Feb 09 '16 at 12:35
i don't want change in oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9); – Varun Sharma Feb 09 '16 at 12:37
Do you mean that you just want to increase the final result to 1500X1500? – Mosh Feu Feb 09 '16 at 12:48
Because i want send 1800px*2000px image to server. Yes i want to increase final result 1800px*2000px. – Varun Sharma Feb 09 '16 at 12:51
OK. Why can't you use 2 canvases (The user will see just one..) – Mosh Feu Feb 09 '16 at 12:52
uploaded image and converted canvas image not same.you can check artm's fiddle. – Varun Sharma Feb 09 '16 at 12:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/102998/discussion-between-varun-sharma-and-mosh-feu). – Varun Sharma Feb 09 '16 at 12:59
I am generating new question for more detail. Please check this http://stackoverflow.com/questions/35499085/uploaded-image-in-canvas-dont-lose-the-width-and-height-fabric-js – Varun Sharma Feb 19 '16 at 06:55
Can you help me on this question? http://stackoverflow.com/questions/35547528/make-anchor-tag-with-image-clickable/35547603?noredirect=1#comment58783969_35547603 – Varun Sharma Feb 22 '16 at 07:51
I was answer you there. We need to find a better way to keep my attention ;) – Mosh Feu Feb 22 '16 at 08:39
In the future, you can contact me via my linkedin profile (you can see it in my profile page) – Mosh Feu Feb 22 '16 at 12:27

score 0 · Answer 2 · answered Feb 09 '16 at 12:39

See if https://jsfiddle.net/8gt6d7op/14/ works. toDataURL only works with whatever is in the canvas, so you can't specify size. Size is already in the canvas.

You can use a 2nd canvas with a size you want and use that to populate the image from.

<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" />
<canvas id="canvas2" width="1000" height="1000" style="display:none;"></canvas>

var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.Canvas('canvas2');
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();
      canvas2.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas2.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();
  canvas2.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas2.toDataURL();
}

@arrtm. I want to 450px*450px canvas convert into 1000px*1000px image. — Varun Sharma, Feb 09 '16 at 12:49

AndreaBogazzi · Accepted Answer · 2016-02-11T11:00:58.827

0

Your code is fine and do not need any big change. If you want to export image in various dimensions try this.

I created two export links, one for width 500 and one for 1000. As you see you can export image directly instead of canvas.

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);
    });
  };
  reader.readAsDataURL(file);
});

document.querySelector('#txt').onclick = function (e) {
  _export(e, 500);
}

document.querySelector('#txt2').onclick = function (e) {
  _export(e, 1000);
}

function _export(e, width) {
  e.preventDefault();
  var a = canvas.getActiveObject();
  canvas.deactivateAll().renderAll();
  var mult = width / a.width;
  document.querySelector('#preview').src = a.toDataURL({multiplier: mult});


}

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!! 500</a><br />
<a href='' id='txt2' target="_blank">Click Me!! 1000</a>
<br />
<img id="preview" />

edited Feb 11 '16 at 11:00

answered Feb 10 '16 at 19:28

AndreaBogazzi

14,323
3
38
63

@AndreaBgazzi. Your code snippet is not running in your (Run code snippet). May you explain me? – Varun Sharma Feb 11 '16 at 04:41
maybe is not clear to me what do you need exactly, i change it and add more explanations. – AndreaBogazzi Feb 11 '16 at 10:42
@AndreaBgazzi.. I mean your code is not running. You mentioned your execute code. But image is not upload in canvas. Please run your code snippet once again. – Varun Sharma Feb 11 '16 at 10:44
I did not add on canvas on purpouse, because i thought that you needed just to export the image. please check it now. – AndreaBogazzi Feb 11 '16 at 11:01
When you click on click me then image should display with 1000px*1000px. Please Check my jsfiddle.(canvas convert into image with uploaded image) – Varun Sharma Feb 11 '16 at 11:10
do you want to export the CANVAS or just the IMAGE? – AndreaBogazzi Feb 11 '16 at 12:38
I am generating new question for more detail. Please check this stackoverflow.com/questions/35499085/… – Varun Sharma Feb 19 '16 at 07:09

Convert canvas into image with fix size in HTML5

3 Answers3