[英]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>
我试图通过输入标签从硬盘上载图像文件。 这是我的示例代码。 告诉我如何更改此脚本,以便可以从输入中选择图片。
您可以使用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">
这里有一个工作示例: 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'
});
您只需要使用FileReader即可将图像文件读取为base64格式,并将fabric.Image
添加到画布。
但是,文件大小有限制。 随浏览器的不同而不同: Base64 DataURL图像的大小限制是多少?
角度解决方案:
打字稿:
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">
为什么不在输入字段上使用更改处理程序?
如果添加ID
<input type="file" name="Image" id="Image">
然后可以尝试
//assuming jquery
$("#Image").on("change", function(e) {
//run your code here
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.