<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 查看图像而无需上传图像并将其添加到 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.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas"></canvas>
<input type="file" id="file">关于javascript - 如何使用 fabricjs 在 HTMlL5 canvas 中从本地硬盘上传图像文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28297260/