Sal*_*han 2 javascript html5 html5-canvas 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">