如何使用fabricjs从HTMlL5 canvas中的本地硬盘驱动器上传图像文件
[英]How to upload image file from local hard drive in HTMlL5 canvas using fabricjs
问题描述
<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>
im 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. 告诉我如何更改此脚本，以便可以从输入中选择图片。
4 个解决方案
解决方案1
7 2015-02-03 11:14:36
You can use the HTML5 FileReader to view the image without uploading it and add it to the canvas. 您可以使用HTML5 FileReader来查看图像，而无需上传图像并将其添加到画布。
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">
解决方案2
0 2015-02-03 11:31:30
Here you have working example: http://jsbin.com/wecupu/2/edit 这里有一个工作示例： http : //jsbin.com/wecupu/2/edit
HTML 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 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. 您只需要使用FileReader即可将图像文件读取为base64格式，并将fabric.Image添加到画布。
However, there is limitation to file size. 但是，文件大小有限制。 It varies across browsers: What is the size limit of a Base64 DataURL image? 随浏览器的不同而不同： Base64 DataURL图像的大小限制是多少？
解决方案3
0 2019-07-01 19:14: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: HTML：
<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="uploadImage($event)" #fileInput type="file" id="file">
解决方案4
-1 2015-02-03 11:04:04
Why not use a change handler on the input field? 为什么不在输入字段上使用更改处理程序？
If you add an id 如果添加ID
<input type="file" name="Image" id="Image">
You can then try 然后可以尝试
//assuming jquery
$("#Image").on("change", function(e) {
//run your code here
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.