fabricjs 可以怎麼操作圖片

可以創建和操作圖片對象 (fabric.Image)，支持輸入輸出多種圖片格式（如 PNG、JPEG 等）。

• 圖片上傳：可以輕鬆將用戶上傳的圖片添加到畫布中。

• 濾鏡效果：Fabric.js內置多種濾鏡效果，如灰度、深褐色、反轉等，可以輕鬆應用於圖片。

• 圖片變形：提供縮放、旋轉、傾斜等變形操作，還支持自由變形。
  當然也可以使用先前說的那些通用的屬性來改變圖片的樣子。

fabric.Image.fromURL('path/to/image.jpg', function(img) {
  // 添加灰度濾鏡
  img.filters.push(new fabric.Image.filters.Grayscale());
  img.applyFilters();
  
  // 縮放圖片
  img.scale(0.5);
  
  canvas.add(img);
});

圖片上傳

方式1:從本地上傳圖片

用 input 元素來瀏覽要從本地上傳的圖片

<input type="file" id="imageUploader" accept="image/*">

const canvas = new fabric.Canvas("canvas");

function handleImageUpload(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function (e) {
    const data = e.target.result;
    fabric.Image.fromURL(data, function (img) {
      // 調整圖片大小和位置，寬度調整為200px
      img.scaleToWidth(200);

      // 將圖片添加到canvas
      canvas.add(img);
      canvas.renderAll();
    });
  };

  reader.readAsDataURL(file);
}


// 將 上傳的 function 與 input 綁定
document
  .getElementById("imageUploader")
  .addEventListener("change", handleImageUpload);

🌰 從本地上傳圖片 codepen

方式2:使用網址加入圖片

fabric.Image.fromURL('https://example.com/image.jpg', function(img) {
  // 調整圖片大小和位置
  img.scaleToWidth(200);
  
  // 將圖片添加到canvas
  canvas.add(img);
  canvas.renderAll();
});

方式3:使用 api 取得圖片資源

使用非同步的方式求取資源，取得資源後再將圖片放進 fabric 的物件裡

fetch('https://api.example.com/get-image-url')
  .then(response => response.json())
  .then(data => {
    fabric.Image.fromURL(data.imageUrl, function(img) {
      img.scaleToWidth(200);
      canvas.add(img);
      canvas.renderAll();
    });
  })
  .catch(error => console.error('Error:', error));

＊注意！

在使用網址或第三方服務將圖片添加到Fabric.js時，須考慮跨域問題，下一篇會說明解法。

已上是不同來源的方式
再多加介紹插入圖片的不同方式

4种插入图片的方式

fabric.js 提供了多种插入图片的方式，主要流程都是将原生的Img对象转换成fabric.Image对象，然后插入到画布中。

• fabric.Image.fromURL：通过回调直接返回fabric的img对象，直接插入到画布中。
• fabric.util.loadImage：通过回调返回原生img对象，转换为fabric对象后插入画布中。
• new Image() 与 document.createElement('img')：创建原生img对象，转换为fabric对象后插入画布中。
• <img />：将页面中的img元素，通过选择器获取到原生img对象，转换为fabric对象后插入画布中。

作者：愚坤秦少卫
链接：https://juejin.cn/post/7355438430853103653
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

濾鏡

在 Fabric.js 中，filters 屬性允許你應用各種濾鏡效果來改變圖片的外觀。這些濾鏡可以用來實現模糊、亮度調整、對比度調整等效果。以下是一些常用的濾鏡及其屬性：

應用濾鏡

要將濾鏡應用到圖片上，你需要創建濾鏡對象並將其添加到圖片的 filters 屬性中，然後調用 applyFilters 方法。以下是一個完整的示例：

const imgElement = document.getElementById('my-image');
const imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100
});

// 創建濾鏡對象
const brightnessFilter = new fabric.Image.filters.Brightness({
  brightness: 0.05
});
const contrastFilter = new fabric.Image.filters.Contrast({
  contrast: 0.1
});

// 將濾鏡添加到圖片的 filters 屬性中
imgInstance.filters.push(brightnessFilter);
imgInstance.filters.push(contrastFilter);

// 應用濾鏡
imgInstance.applyFilters();

// 將圖片添加到畫布
canvas.add(imgInstance);

關於濾鏡的有趣實作例子

他的做法是，創建一個物件會即時拷貝
先擷取主畫布上的所有畫面，新增到一個可被移動的物件上，並套用模糊濾鏡在物件上。每當模糊區塊被移動或縮放時，會更新模糊區塊上的畫面。

demo source code：jsfiddle
在fabric.js issues上的原討論串：Can fabric.js be used to create an overlay blur mask?

常用濾鏡

以下列出幾個常用濾鏡與參數設定的例子：

#fabricjs

1. Brightness: 調整圖片的亮度。

   new fabric.Image.filters.Brightness({
     brightness: 0.05 // 亮度值，範圍從 -1 到 1
   });
   

2. Contrast: 調整圖片的對比度。

   new fabric.Image.filters.Contrast({
     contrast: 0.1 // 對比度值，範圍從 -1 到 1
   });
   

3. Grayscale: 將圖片轉換為灰度圖像。

   new fabric.Image.filters.Grayscale();
   

4. Sepia: 將圖片轉換為棕褐色效果。

   new fabric.Image.filters.Sepia();
   

5. Invert: 反轉圖片的顏色。

   new fabric.Image.filters.Invert();
   

6. Blur: 模糊圖片。

   new fabric.Image.filters.Blur({
     blur: 0.5 // 模糊值，範圍從 0 到 1
   });
   

7. Pixelate: 將圖片像素化。

   new fabric.Image.filters.Pixelate({
     blocksize: 8 // 像素塊大小
   });
   

8. RemoveColor: 移除圖片中的特定顏色。

   new fabric.Image.filters.RemoveColor({
     color: '#FFFFFF', // 要移除的顏色
     distance: 0.1 // 顏色距離，範圍從 0 到 1
   });