整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
?現(xiàn)在借助于Html5中Canvas可以實(shí)現(xiàn)在線(xiàn)對(duì)圖片進(jìn)行一些較復(fù)雜的編輯操作，如圖片合成、裁剪、旋轉(zhuǎn)、縮放、調(diào)整亮度、添加濾鏡等等。但由于canvas原生api使用起來(lái)比較繁瑣，特別是利用canvas對(duì)圖片一些復(fù)雜的操作，如利用蒙版實(shí)現(xiàn)手機(jī)殼和圖案在線(xiàn)合成并可調(diào)整圖案大小及位置時(shí)，使用原生api的工作量非常大，且隨著需求的調(diào)整、細(xì)化，代碼會(huì)變得復(fù)雜且臃腫，難以維護(hù)，最終變成shit mountain堆在那里。
??當(dāng)需要實(shí)現(xiàn)此類(lèi)復(fù)雜的功能時(shí)，這就不得不借助于現(xiàn)成的canvas庫(kù)了，比如fabric.js。fabric.js是一個(gè)功能強(qiáng)大且易用的Html5 Canvas js類(lèi)庫(kù)。使用fabric.js，我們可以輕松實(shí)現(xiàn)對(duì)圖片進(jìn)行在線(xiàn)合成、裁剪等復(fù)雜操作。
??本篇文章將介紹如何使用fabric.js實(shí)現(xiàn)帶蒙版圖片合成及調(diào)整、導(dǎo)出等。
//模塊項(xiàng)目
npm install fabric --save
import { fabric } from "fabric"
//非模塊化項(xiàng)目
<script src="fabric.js"></script>
<canvas id="c" ></canvas>
let id = 'c';
let canvas = new fabric.Canvas(id, {
backgroundColor: '#fff',//背景色，默認(rèn)透明背景
width: 800,//canvas畫(huà)布寬度
height: 800//畫(huà)布高度
})
fabric.Image.fromURL(圖片的URL, (img) => {
img.scaleToHeight(800);//圖片縮放到畫(huà)布高度
canvas.add(img);
canvas.sendToBack(img);//放在最底層
//也可以直接使用canvas.setBackgroundImage方法直接設(shè)置背景圖片
}, {
//也可以在回調(diào)里使用.set方法設(shè)置各個(gè)屬性值
crossOrigin: "anonymous",//跨域時(shí)需要加上
selectable: false,
left: 800 / 2, //顯示在畫(huà)布中間
top: 800 / 2,
originX: 'center',//橫坐標(biāo)原點(diǎn)位置
originY: 'center',//縱坐標(biāo)原點(diǎn)位置
});
注意: 要需要在回調(diào)函數(shù)里按實(shí)際寬或高度設(shè)置圖片寬度或高度顯示比例,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", //選中時(shí)邊框顏色
borderScaleFactor: 2, //邊框比例因子
cornerSize: 8,//邊框控制角大小
padding: 0,
cornerColor: "#0091FF",
clipPath: mask,//指定蒙版圖片
});
}, {
crossOrigin: "anonymous",
absolutePositioned: true,//根據(jù)實(shí)際設(shè)置,為true時(shí)固定顯示，不隨圖案移動(dòng)而移動(dòng)
left: 400,//指定蒙版顯示大小
top: 400,
originX: 'center',
originY: 'center',
});
img.set("selectable", true);
canvas.setActiveObject(img);
canvas.requestRenderAll();
//導(dǎo)出為json
let json = canvas.toJSON();
//將json保存到后臺(tái)服務(wù)器，可以根據(jù)json對(duì)圖片再次編輯，json中包含了調(diào)整后圖片的高度、寬度、角度等信息
//導(dǎo)出為base64圖片
let imgBase64 = canvas.toDataURL({
format:'png',
multiplier: 2,//根據(jù)實(shí)際需要設(shè)置導(dǎo)出圖片與當(dāng)前canvas的比例，比例越大，導(dǎo)出圖片的分辨率越高
});
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
問(wèn)題
??盡管fabric.js功能已經(jīng)很強(qiáng)大，api也比較完善，結(jié)合官網(wǎng)文檔可以快速實(shí)現(xiàn)我們的需求，但有一些細(xì)節(jié)問(wèn)題需要我們?nèi)ゲ瓤印⑷タ偨Y(jié)，比如：
let json = canvas.toJSON(['crossOrigin', 'selectable','angle', 'left', 'right', 'scaleX', 'scaleY']);
*標(biāo)題：** Web端屏幕截屏，生成自定義海報(bào)！
---
**引子**
隨著互聯(lián)網(wǎng)應(yīng)用的多樣化，越來(lái)越多的場(chǎng)景下需要用到網(wǎng)頁(yè)截圖和自定義海報(bào)生成的功能，比如分享文章摘要、活動(dòng)宣傳、產(chǎn)品展示等。本文將深入探討如何通過(guò)Web前端技術(shù)實(shí)現(xiàn)這一功能，讓用戶(hù)直接在瀏覽器中完成屏幕截取并設(shè)計(jì)自己的個(gè)性化海報(bào)。我們將圍繞HTML5、Canvas以及一些JavaScript庫(kù)來(lái)構(gòu)建一個(gè)實(shí)用且互動(dòng)性強(qiáng)的解決方案，助您在項(xiàng)目中輕松集成這一熱門(mén)功能。
---
**一、理解基礎(chǔ)概念**
**1.1 Canvas API簡(jiǎn)介**
在Web前端領(lǐng)域，`<canvas>` 元素是HTML5中的一個(gè)重要組成部分，它提供了在網(wǎng)頁(yè)上繪制圖形的能力，包括動(dòng)態(tài)圖像。利用Canvas API，我們可以捕獲網(wǎng)頁(yè)視圖的圖像數(shù)據(jù)，并將其轉(zhuǎn)換為可編輯或可保存的圖像格式。
**1.2 屏幕截屏原理**
實(shí)現(xiàn)網(wǎng)頁(yè)截屏的核心在于使用Canvas結(jié)合`window.getComputedStyle()`獲取元素樣式信息，然后遍歷DOM樹(shù)并渲染到Canvas上。最終通過(guò)`toDataURL()`方法將Canvas內(nèi)容轉(zhuǎn)為圖片數(shù)據(jù)。
---
**二、實(shí)現(xiàn)網(wǎng)頁(yè)截屏功能**
**2.1 獲取頁(yè)面可視區(qū)域**
```javascript
function capturePage() {
const html2canvasOptions = {
useCORS: true, // 處理跨域圖片資源
allowTaint: false,
};
return html2canvas(document.body, html2canvasOptions)
.then((canvas) => {
// 返回Base64編碼的圖片數(shù)據(jù)
return canvas.toDataURL('image/png');
})
.catch((error) => console.error("Error capturing page:", error));
}
```
此處使用了`html2canvas`庫(kù)來(lái)簡(jiǎn)化屏幕截取的過(guò)程，它可以將整個(gè)DOM樹(shù)的內(nèi)容渲染到Canvas上。請(qǐng)注意，在實(shí)際項(xiàng)目中，可能需要指定截取特定區(qū)域而非整個(gè)body。
**2.2 將截屏結(jié)果轉(zhuǎn)化為海報(bào)模板**
```javascript
// 假設(shè)我們已經(jīng)獲得了截屏圖片dataURL
let screenshotDataUrl = await capturePage();
// 創(chuàng)建一個(gè)新的canvas用于制作海報(bào)
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 = () => {
// 添加背景、邊框、文字等自定義元素
// ...
// 將截屏圖片繪制到海報(bào)canvas
ctx.drawImage(img, MARGIN_LEFT, MARGIN_TOP);
// 最后將海報(bào)canvas轉(zhuǎn)為圖片
let finalPosterDataUrl = posterCanvas.toDataURL('image/png');
// 可以將finalPosterDataUrl用于顯示、下載或上傳
};
```
在這個(gè)階段，我們首先捕獲到網(wǎng)頁(yè)屏幕內(nèi)容，然后在新的Canvas上添加自定義設(shè)計(jì)元素（如背景、logo、標(biāo)題等），最后合并成一張完整的海報(bào)圖片。
---
**三、優(yōu)化與拓展**
**3.1 性能優(yōu)化**
- **懶加載**：只截取用戶(hù)可見(jiàn)區(qū)域或滾動(dòng)事件觸發(fā)時(shí)才截取。
- **壓縮優(yōu)化**：對(duì)生成的圖片進(jìn)行壓縮以減少傳輸和存儲(chǔ)成本。
**3.2 功能擴(kuò)展**
- **添加交互設(shè)計(jì)**：允許用戶(hù)選擇截圖范圍、拖拽圖片位置、調(diào)整圖片大小等。
- **社交分享**：集成微信、微博等社交平臺(tái)的分享接口，便于用戶(hù)一鍵分享自定義海報(bào)。
---
**四、實(shí)戰(zhàn)案例及代碼詳解**
此處可以進(jìn)一步提供詳細(xì)的代碼分析和示例代碼片段，逐行解釋上述核心函數(shù)的實(shí)現(xiàn)邏輯，并給出一個(gè)包含完整功能的簡(jiǎn)單Demo頁(yè)面源碼，以便讀者跟隨實(shí)踐。
---
**結(jié)語(yǔ)**
通過(guò)熟練掌握Web前端技術(shù)和巧妙運(yùn)用Canvas與相關(guān)庫(kù)，我們可以高效地實(shí)現(xiàn)在瀏覽器端進(jìn)行屏幕截取和自定義海報(bào)生成。這一功能不僅提升了用戶(hù)體驗(yàn)，也為各種在線(xiàn)應(yīng)用增添了趣味性和實(shí)用性。未來(lái)隨著Web技術(shù)的持續(xù)發(fā)展，這類(lèi)功能還將衍生出更多創(chuàng)新應(yīng)用場(chǎng)景，讓我們共同期待并探索更多的可能性。
---
**注：** 由于篇幅限制，以上僅展示了部分關(guān)鍵代碼和思路，實(shí)際編寫(xiě)技術(shù)教程時(shí)，應(yīng)詳細(xì)介紹每個(gè)步驟的具體實(shí)現(xiàn)細(xì)節(jié)，附帶完整代碼實(shí)例，并配以圖文說(shuō)明和效果演示，確保讀者能夠順利理解和復(fù)現(xiàn)該功能。同時(shí)，建議在實(shí)戰(zhàn)環(huán)節(jié)引導(dǎo)讀者一步步搭建真實(shí)環(huán)境下的項(xiàng)目，并針對(duì)常見(jiàn)問(wèn)題給予解答。
Html Code
<img src="./tupian.png" id="image" style="display: none;">
<canvas id="main" width="248" height="250" style="width: 100%;">
當(dāng)前瀏覽器不支持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 */
//先把圖片繪制在畫(huà)布上
mainCtx.drawImage($('#image')[0], 0, 0, 248, 350);
// 在畫(huà)布上繪制文字
mainCtx.font = "200px 微軟雅黑";
mainCtx.textAlign = "center";
mainCtx.fillStyle = "#000";
mainCtx.fillText("繪制的文案", 124, 157);
/* 合成圖片end */
// ####關(guān)鍵代碼第二步
var oImage = new Image();
//toDataURL方法，可以導(dǎo)出canvas元素上的圖像
oImage.src = oCanvasMain.toDataURL('image/png', 1);
$('#main').after(oImage).hide();
新增需求「在pc下載功能」 ??
//需要兩個(gè)方法
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)
}
}
}
/* 如果想實(shí)現(xiàn)點(diǎn)擊下載 */
$('.downalink').on('click',function(){
downloadBase64(oCanvasMain.toDataURL('image/png', 1), '圖片名稱(chēng).png');
})html2canvas可以通過(guò)純JS對(duì)瀏覽器端進(jìn)行截屏，但截圖的精確度還有待提高，部分css不可識(shí)別，所以在canvas中不能完美呈現(xiàn)原畫(huà)面樣式
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
