javascript 如何使用 Fabric.js 将图像上传到画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21715812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload an image to a canvas with Fabric.js?
提问by V SH
I want that to create a process where the users can upload their images and then edit them in the browser in a Canvas with Fabric.js using some buttons -wich uses Fabric.js to add some effects-.
我希望创建一个过程，用户可以在其中上传他们的图像，然后在带有 Fabric.js 的 Canvas 中使用一些按钮在浏览器中编辑它们 -wich 使用 Fabric.js 添加一些效果-。
I can't make it work. My HTML is:
我不能让它工作。我的 HTML 是：
<form id="uploadImg" runat="server">
<input type="file" id="uploadedImg"/>
</form>
<canvas id="canvas"></canvas>
The Javascript is the following:
Javascript 如下：
var canvas = new fabric.Canvas('canvas');
canvas.setHeight(480);
canvas.setWidth(640);
$('#uploadedImg').change(function () {
var imgData = $(this).files[0];
fabric.util.loadImage(imgData, function(img) {
var oImg = new fabric.Image(img);
oImg.scale(0.2).set({
left: 100,
top: 100,
});
canvas.add(oImg);
});
});
回答by samad
document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event){
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
image.set({
angle: 0,
padding: 10,
cornersize:10,
height:110,
width:110,
});
canvas.centerObject(image);
canvas.add(image);
canvas.renderAll();
}
}
reader.readAsDataURL(e.target.files[0]);
}
回答by V SH
You can upload multiple image by fabric js and its also draggable one place to another place in canvas.
您可以通过fabric js上传多个图像，并且它也可以在画布中从一个地方拖动到另一个地方。
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: 0, top: 0, angle: 0,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});canvas{
border: 1px solid black;
}
Include it like this:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>回答by Rajat Jain
var canvas = new fabric.Canvas('main-canvas');
canvas.selection = false;
var imgElement = document.getElementById("img11");
var imgInstance = new fabric.Image(imgElement, {
angle: 0,
position: 'absolute',
opacity: 1,
originX: 'left',
originY:'top',
meetOrSlice:'slice',
});
imgInstance.selectable = false;
canvas.add(imgInstance);
canvas.renderAll();
