<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 KhanSalman Ullah Khan 72810 silver badges29 bronze badges4 Answers
Reset to default 8You 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>
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?
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
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742374170a4431851.html
评论列表（0条）