?現在借助于Html5中Canvas可以實現在線對圖片進行一些較復雜的編輯操作,如圖片合成、裁剪、旋轉、縮放、調整亮度、添加濾鏡等等。但由于canvas原生api使用起來比較繁瑣,特別是利用canvas對圖片一些復雜的操作,如利用蒙版實現手機殼和圖案在線合成并可調整圖案大小及位置時,使用原生api的工作量非常大,且隨著需求的調整、細化,代碼會變得復雜且臃腫,難以維護,最終變成shit mountain堆在那里。
??當需要實現此類復雜的功能時,這就不得不借助于現成的canvas庫了,比如fabric.js。fabric.js是一個功能強大且易用的Html5 Canvas js類庫。使用fabric.js,我們可以輕松實現對圖片進行在線合成、裁剪等復雜操作。
??本篇文章將介紹如何使用fabric.js實現帶蒙版圖片合成及調整、導出等。
//模塊項目
npm install fabric --save
import { fabric } from "fabric"
//非模塊化項目
<script src="fabric.js"></script>
<canvas id="c" ></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',
});
img.set("selectable", true);
canvas.setActiveObject(img);
canvas.requestRenderAll();
//導出為json
let json = canvas.toJSON();
//將json保存到后臺服務器,可以根據json對圖片再次編輯,json中包含了調整后圖片的高度、寬度、角度等信息
//導出為base64圖片
let imgBase64 = canvas.toDataURL({
format:'png',
multiplier: 2,//根據實際需要設置導出圖片與當前canvas的比例,比例越大,導出圖片的分辨率越高
});
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
問題
??盡管fabric.js功能已經很強大,api也比較完善,結合官網文檔可以快速實現我們的需求,但有一些細節問題需要我們去踩坑、去總結,比如:
let json = canvas.toJSON(['crossOrigin', 'selectable','angle', 'left', 'right', 'scaleX', 'scaleY']);
*標題:** 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技術的持續發展,這類功能還將衍生出更多創新應用場景,讓我們共同期待并探索更多的可能性。
---
**注:** 由于篇幅限制,以上僅展示了部分關鍵代碼和思路,實際編寫技術教程時,應詳細介紹每個步驟的具體實現細節,附帶完整代碼實例,并配以圖文說明和效果演示,確保讀者能夠順利理解和復現該功能。同時,建議在實戰環節引導讀者一步步搭建真實環境下的項目,并針對常見問題給予解答。
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可以通過純JS對瀏覽器端進行截屏,但截圖的精確度還有待提高,部分css不可識別,所以在canvas中不能完美呈現原畫面樣式
*請認真填寫需求信息,我們會在24小時內與您取得聯系。