How to upload image file from local hard drive in HTMlL5 canvas using fabricjs

Question

 <html>
<input type="file" name="Image">
</html>

<script>
fabric.Image.fromURL('image.jpg', function(img) {enter code here
var oImg = img.set({ left: 50, top: 100, angle: 00 }).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
</script>

i m trying to upload image file from the hard drive by input tag. This is my sample code. tell me how can i change this script so that i can choose the picture from input.

score 8 · Answer 1 · answered Feb 03 '15 at 11:14

8

You can use the HTML5 FileReader to view the image without uploading it and add it to the 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).renderAll();
            canvas.setActiveObject(oImg);
        });
    };
    reader.readAsDataURL(file);
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas"></canvas>
<input type="file" id="file">

answered Feb 03 '15 at 11:14

Ben Fortune

31,623
10
79
80

2

Uncaught TypeError: Cannot read property 'addEventListener' of null i m getting this error on this line document.getElementById('image').addEventListener("change", function(e) { – Salman Ullah Khan Feb 03 '15 at 11:25
@SalmanUllah If you're going by your example in the OP, it's `Image` not `image`. – Ben Fortune Feb 03 '15 at 11:27
i have tried with different ids but still getting the same error. – Salman Ullah Khan Feb 03 '15 at 11:29
Have you set an id for your input? – Ben Fortune Feb 03 '15 at 11:29
yes i have set id="file" in input and the same id to the document.getElementById("file") – Salman Ullah Khan Feb 03 '15 at 11:32

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

Here you have working example: http://jsbin.com/wecupu/2/edit

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input id="file" type="file" accept="image/*">
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

JS

var readFile = function(e) {
  var input = e.target;

  var reader = new FileReader();

  reader.onload = function(){
    var img = document.createElement('img');
    img.src = reader.result;

    var image = new fabric.Image(img);
    canvas.add(image);
  };

  reader.readAsDataURL(input.files[0]);
};

document.getElementById('file').addEventListener('change', readFile);

var canvas = new fabric.Canvas(document.getElementById('canvas'), {
  backgroundColor: '#c8c8c8'
});

You just have to use FileReader to read image file into base64 format and add fabric.Image to canvas.

However, there is limitation to file size. It varies across browsers: What is the size limit of a Base64 DataURL image?

edited May 23 '17 at 11:51

Community

1
1

answered Feb 03 '15 at 11:31

Łukasz Jagodziński

3,009
2
25
33

Uncaught TypeError: Cannot read property 'addEventListener' of null i m still getting this error – Salman Ullah Khan Feb 03 '15 at 11:39
Are getting this error when running this http://jsbin.com/wecupu/2/edit example? Because it's almost impossible to happen. I assume that you've tried implementing this just by copying code above and missing something. You have to have input field with id "file". – Łukasz Jagodziński Feb 03 '15 at 11:52
No i did change my input id to id="file". – Salman Ullah Khan Feb 03 '15 at 11:55
So, you probably have an error in the other place. Put your code here. – Łukasz Jagodziński Feb 03 '15 at 11:58
Oh i m sorry. i didn't check my input id. thank you very much. it is now uploading my picture. but when i click it, it disappear. – Salman Ullah Khan Feb 03 '15 at 11:59
When you try this http://jsbin.com/wecupu/2/edit example you can see that clicking image does not cause it to disappear. So the problem is with your code. You probably set some event on object selection that causes such behavior. However, it's hard to guess without seeing code. – Łukasz Jagodziński Feb 03 '15 at 12:02
My code is very long how can i show u here? i cannot comment it. i m new here can u guide me how can i show my whole code? – Salman Ullah Khan Feb 03 '15 at 12:08

score 0 · Answer 3 · answered Jul 01 '19 at 19:14

Angular solution:

Typescript:

uploadImage(event) {
    if (event.target.files.length > 0) {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = (e: any) => {
            const data = e.target.result;
            fabric.Image.fromURL(data, img => {
                this.canvas.add(img);
                this.canvas.centerObject(img);
            });
        };

        reader.readAsDataURL(file);
    }
}

HTML:

<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="uploadImage($event)" #fileInput type="file" id="file">

score -1 · Answer 4 · answered Feb 03 '15 at 11:04

-1

Why not use a change handler on the input field?

If you add an id

<input type="file" name="Image" id="Image">

You can then try

//assuming jquery
$("#Image").on("change", function(e) {
   //run your code here
});

answered Feb 03 '15 at 11:04

Raymond Camden

10,661
3
34
68

How can i use change handler with fabric js? – Salman Ullah Khan Feb 03 '15 at 11:09
I would check the FabricJS docs for that. Your issue was - afaik - recognizing when the user selected a file. – Raymond Camden Feb 03 '15 at 13:00

How to upload image file from local hard drive in HTMlL5 canvas using fabricjs

4 Answers4