如何在fabric.js中使用蒙版合成圖片

?現在借助于Html5中Canvas可以實現在線對圖片進行一些較復雜的編輯操作，如圖片合成、裁剪、旋轉、縮放、調整亮度、添加濾鏡等等。但由于canvas原生api使用起來比較繁瑣，特別是利用canvas對圖片一些復雜的操作，如利用蒙版實現手機殼和圖案在線合成并可調整圖案大小及位置時，使用原生api的工作量非常大，且隨著需求的調整、細化，代碼會變得復雜且臃腫，難以維護，最終變成shit mountain堆在那里。

??當需要實現此類復雜的功能時，這就不得不借助于現成的canvas庫了，比如fabric.js。fabric.js是一個功能強大且易用的Html5 Canvas js類庫。使用fabric.js，我們可以輕松實現對圖片進行在線合成、裁剪等復雜操作。

??本篇文章將介紹如何使用fabric.js實現帶蒙版圖片合成及調整、導出等。

安裝并在js中引入fabric

//模塊項目
npm install fabric --save
import { fabric } from "fabric"
//非模塊化項目
<script src="fabric.js"></script>

在html中新建一個canvas標簽

<canvas id="c" ></canvas>

初始化canvas

let id = 'c';
let canvas = new fabric.Canvas(id, {
    backgroundColor: '#fff',//背景色，默認透明背景
    width: 800,//canvas畫布寬度
    height: 800//畫布高度
})

添加背景圖片

fabric.Image.fromURL(圖片的URL, (img) => {
    img.scaleToHeight(800);//圖片縮放到畫布高度
    canvas.add(img);
    canvas.sendToBack(img);//放在最底層
    //也可以直接使用canvas.setBackgroundImage方法直接設置背景圖片
}, {
    //也可以在回調里使用.set方法設置各個屬性值
    crossOrigin: "anonymous",//跨域時需要加上
    selectable: false,
    left: 800 / 2, //顯示在畫布中間
    top: 800 / 2,
    originX: 'center',//橫坐標原點位置
    originY: 'center',//縱坐標原點位置
});

注意: 要需要在回調函數里按實際寬或高度設置圖片寬度或高度顯示比例,img.scaleToHeight(800)

加載蒙版及圖案

//先加載蒙版
fabric.Image.fromURL(蒙版url, (mask) => {
    mask.scaleToHeight(800);
    //加載圖案
    fabric.Image.fromURL(圖案url, (img) => {
        img.scaleToHeight(800);
        canvas.add(img);
    }, {
        crossOrigin: "anonymous",
        left: 400,
        top: 400,
        originX: 'center',
        originY: 'center',
        selectable: false,
        borderColor: "#0091FF", //選中時邊框顏色
        borderScaleFactor: 2, //邊框比例因子
        cornerSize: 8,//邊框控制角大小
        padding: 0,
        cornerColor: "#0091FF",
        clipPath: mask,//指定蒙版圖片
    });
}, {
    crossOrigin: "anonymous",
    absolutePositioned: true,//根據實際設置,為true時固定顯示，不隨圖案移動而移動
    left: 400,//指定蒙版顯示大小
    top: 400,
    originX: 'center',
    originY: 'center',
});

啟用編輯
設置圖案圖片的selectable屬性為true，并設置圖片對象為活動狀態

img.set("selectable", true);
canvas.setActiveObject(img);
canvas.requestRenderAll();

保存編輯后的圖案
保存可以直接導出為圖片，也可以導出為json

//導出為json
let json = canvas.toJSON();
//將json保存到后臺服務器，可以根據json對圖片再次編輯，json中包含了調整后圖片的高度、寬度、角度等信息

//導出為base64圖片
let imgBase64 = canvas.toDataURL({
    format:'png',
    multiplier: 2,//根據實際需要設置導出圖片與當前canvas的比例，比例越大，導出圖片的分辨率越高
});

對編輯過的圖案再次編輯
初始化canvas后，通過loadFromJSON加載圖片,這樣加載出來的圖片是我們上次編輯后的圖片，可以對其繼續調整。

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

問題
??盡管fabric.js功能已經很強大，api也比較完善，結合官網文檔可以快速實現我們的需求，但有一些細節問題需要我們去踩坑、去總結，比如：

加載json后圖片位置大小等與上次我們編輯完保存的有些許差異，這是因為導出的json中的left、top、angle、scaleX、scaleY等只保留到小數點后兩位，這樣當我們的圖片分辨率比較高時，差距尤其明顯，解決此問題只需導出時指定我們需要保留的屬性即可

let json = canvas.toJSON(['crossOrigin', 'selectable','angle', 'left', 'right', 'scaleX', 'scaleY']);

加載蒙版時別忘了指定蒙版圖片屬性的absolutePositioned為true（根據實際需要設置）
在vue等框架中通過條件渲染或列表渲染時需對canvas擇機初始化,否則會找不到canvas元素導致初始化失敗

*標題：** Web端屏幕截屏，生成自定義海報！

---

**引子**

隨著互聯網應用的多樣化，越來越多的場景下需要用到網頁截圖和自定義海報生成的功能，比如分享文章摘要、活動宣傳、產品展示等。本文將深入探討如何通過Web前端技術實現這一功能，讓用戶直接在瀏覽器中完成屏幕截取并設計自己的個性化海報。我們將圍繞HTML5、Canvas以及一些JavaScript庫來構建一個實用且互動性強的解決方案，助您在項目中輕松集成這一熱門功能。

---

**一、理解基礎概念**

**1.1 Canvas API簡介**

在Web前端領域，`<canvas>` 元素是HTML5中的一個重要組成部分，它提供了在網頁上繪制圖形的能力，包括動態圖像。利用Canvas API，我們可以捕獲網頁視圖的圖像數據，并將其轉換為可編輯或可保存的圖像格式。

**1.2 屏幕截屏原理**

實現網頁截屏的核心在于使用Canvas結合`window.getComputedStyle()`獲取元素樣式信息，然后遍歷DOM樹并渲染到Canvas上。最終通過`toDataURL()`方法將Canvas內容轉為圖片數據。

---

**二、實現網頁截屏功能**

**2.1 獲取頁面可視區域**

```javascript

function capturePage() {

const html2canvasOptions = {

useCORS: true, // 處理跨域圖片資源

allowTaint: false,

};

return html2canvas(document.body, html2canvasOptions)

.then((canvas) => {

// 返回Base64編碼的圖片數據

return canvas.toDataURL('image/png');

})

.catch((error) => console.error("Error capturing page:", error));

}

```

此處使用了`html2canvas`庫來簡化屏幕截取的過程，它可以將整個DOM樹的內容渲染到Canvas上。請注意，在實際項目中，可能需要指定截取特定區域而非整個body。

**2.2 將截屏結果轉化為海報模板**

```javascript

// 假設我們已經獲得了截屏圖片dataURL

let screenshotDataUrl = await capturePage();

// 創建一個新的canvas用于制作海報

const posterCanvas = document.createElement('canvas');

posterCanvas.width = POSTER_WIDTH;

posterCanvas.height = POSTER_HEIGHT;

// 獲取canvas上下文

const ctx = posterCanvas.getContext('2d');

// 將截屏圖片加載到新的canvas

let img = new Image();

img.src = screenshotDataUrl;

img.onload = () => {

// 添加背景、邊框、文字等自定義元素

// ...

// 將截屏圖片繪制到海報canvas

ctx.drawImage(img, MARGIN_LEFT, MARGIN_TOP);

// 最后將海報canvas轉為圖片

let finalPosterDataUrl = posterCanvas.toDataURL('image/png');

// 可以將finalPosterDataUrl用于顯示、下載或上傳

};

```

在這個階段，我們首先捕獲到網頁屏幕內容，然后在新的Canvas上添加自定義設計元素（如背景、logo、標題等），最后合并成一張完整的海報圖片。

---

**三、優化與拓展**

**3.1 性能優化**

- **懶加載**：只截取用戶可見區域或滾動事件觸發時才截取。

- **壓縮優化**：對生成的圖片進行壓縮以減少傳輸和存儲成本。

**3.2 功能擴展**

- **添加交互設計**：允許用戶選擇截圖范圍、拖拽圖片位置、調整圖片大小等。

- **社交分享**：集成微信、微博等社交平臺的分享接口，便于用戶一鍵分享自定義海報。

---

**四、實戰案例及代碼詳解**

此處可以進一步提供詳細的代碼分析和示例代碼片段，逐行解釋上述核心函數的實現邏輯，并給出一個包含完整功能的簡單Demo頁面源碼，以便讀者跟隨實踐。

---

**結語**

通過熟練掌握Web前端技術和巧妙運用Canvas與相關庫，我們可以高效地實現在瀏覽器端進行屏幕截取和自定義海報生成。這一功能不僅提升了用戶體驗，也為各種在線應用增添了趣味性和實用性。未來隨著Web技術的持續發展，這類功能還將衍生出更多創新應用場景，讓我們共同期待并探索更多的可能性。

---

**注：** 由于篇幅限制，以上僅展示了部分關鍵代碼和思路，實際編寫技術教程時，應詳細介紹每個步驟的具體實現細節，附帶完整代碼實例，并配以圖文說明和效果演示，確保讀者能夠順利理解和復現該功能。同時，建議在實戰環節引導讀者一步步搭建真實環境下的項目，并針對常見問題給予解答。

anvas 合成圖片

Html Code
   <img src="./tupian.png"  id="image" style="display: none;">
    <canvas id="main" width="248" height="250" style="width: 100%;">
      當前瀏覽器不支持Html5的canvas
    </canvas>

    <a href="javascript：void(0);" class="js_download_compicture">下載</a>

JS Code
 //canvas 使用2d繪圖上下文提供的方法
    var oCanvasMain = document.getElementById("main");
    var mainCtx = oCanvasMain.getContext("2d");

    /* num1 合成圖片 start */
    //先把圖片繪制在畫布上
    mainCtx.drawImage($('#image')[0], 0, 0, 248, 350);
    // 在畫布上繪制文字
    mainCtx.font = "200px  微軟雅黑";
    mainCtx.textAlign = "center";
    mainCtx.fillStyle = "#000";
    mainCtx.fillText("繪制的文案", 124, 157);
    /* 合成圖片end */ 

    // ####關鍵代碼第二步
    var oImage = new Image();
    //toDataURL方法，可以導出canvas元素上的圖像
    oImage.src = oCanvasMain.toDataURL('image/png', 1);
    $('#main').after(oImage).hide();

新增需求「在pc下載功能」 ?? 
//需要兩個方法
function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], { type: mime })
    }
function downloadBase64(dataUrl, filename) {
        var imageFile, href
        const downloadLink = document.createElement('a');
        try {
            var blob = dataURLtoBlob(dataUrl)
            var href = window.URL.createObjectURL(blob)
            downloadLink.download = filename
            downloadLink.href = href
            downloadLink.click()
        } catch (err) {
        } finally {
            if (href) {
                // window.URL.revokeObjectURL(href)
            }
        }
    }
/* 如果想實現點擊下載 */
    $('.downalink').on('click',function(){
        downloadBase64(oCanvasMain.toDataURL('image/png', 1), '圖片名稱.png');
    })

html2canvas 插件合成圖片

html2canvas可以通過純JS對瀏覽器端進行截屏，但截圖的精確度還有待提高，部分css不可識別，所以在canvas中不能完美呈現原畫面樣式

在線咨詢

上一篇：php手把手教你做網站（六）IIS創建站點注意事項
下一篇：JavaScript 事件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何在fabric.js中使用蒙版合成圖片

anvas 合成圖片

html2canvas 插件合成圖片

您的項目需求