javascript - How to upload image file from local hard drive in HTMlL5 canvas using fabricjs - Stack Overflow

admin2025-03-19 1

 <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.

 <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.

Share Improve this question asked Feb 3, 2015 at 11:00 Salman Ullah Khan 72810 silver badges29 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 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./kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas"></canvas>
<input type="file" id="file">

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

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare./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>

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?

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">

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
});

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1742374173a210343.html

javascriptHow to upload image file from local hard drive in HTMlL5 canvas using fabricjsStack Overflow

最新回复(0)