如何使用fabricjs從HTMlL5 canvas中的本地硬盤驅動器上傳圖像文件

Question

 <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>

我試圖通過輸入標簽從硬盤上載圖像文件。 這是我的示例代碼。 告訴我如何更改此腳本，以便可以從輸入中選擇圖片。

Answer 1

您可以使用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">

Answer 2

這里有一個工作示例： 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圖像的大小限制是多少？

Answer 3

角度解決方案：

打字稿：

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">

Answer 4

為什么不在輸入字段上使用更改處理程序？

如果添加ID

<input type="file" name="Image" id="Image">

然后可以嘗試

//assuming jquery
$("#Image").on("change", function(e) {
   //run your code here
});

如何使用fabricjs從HTMlL5 canvas中的本地硬盤驅動器上傳圖像文件

問題描述

4 個解決方案

解決方案1
7 2015-02-03 11:14:36

解決方案2
0 2015-02-03 11:31:30

解決方案3
0 2019-07-01 19:14:14

解決方案4
-1 2015-02-03 11:04:04

如何使用fabricjs從HTMlL5 canvas中的本地硬盤驅動器上傳圖像文件

問題描述

4 個解決方案

解決方案1 7 2015-02-03 11:14:36

解決方案2 0 2015-02-03 11:31:30

解決方案3 0 2019-07-01 19:14:14

解決方案4 -1 2015-02-03 11:04:04

解決方案1
7 2015-02-03 11:14:36

解決方案2
0 2015-02-03 11:31:30

解決方案3
0 2019-07-01 19:14:14

解決方案4
-1 2015-02-03 11:04:04