整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
將網(wǎng)頁轉(zhuǎn)換為圖片，您可以使用一些庫和工具來實現(xiàn)。在前端開發(fā)中，常用的庫包括html2canvas和dom-to-image。這些庫允許您將HTML元素轉(zhuǎn)換為圖像。
下面是使用html2canvas庫將網(wǎng)頁轉(zhuǎn)換為圖像的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Convert Webpage to Image</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>
<body>
<div id="capture">
<!-- 在這里放置您想要轉(zhuǎn)換為圖像的HTML內(nèi)容 -->
<h1>Hello, World!</h1>
<p>This is an example of converting a webpage to an image.</p>
</div>
<button onclick="convertToImage()">Convert to Image</button>
<script>
function convertToImage() {
html2canvas(document.getElementById("capture")).then(canvas => {
var img = canvas.toDataURL("image/png");
var link = document.createElement("a");
link.href = img;
link.download = "webpage.png";
link.click();
});
}
</script>
</body>
</html>上述代碼使用html2canvas庫來將id為"capture"的div元素轉(zhuǎn)換為圖像。當用戶點擊"Convert to Image"按鈕時，convertToImage()函數(shù)會被調(diào)用。該函數(shù)使用html2canvas對指定的HTML元素進行截圖，并將結(jié)果轉(zhuǎn)換為一個包含圖像數(shù)據(jù)的URL。然后，創(chuàng)建一個隱藏的鏈接元素，將圖像數(shù)據(jù)URL設(shè)置為鏈接的href屬性，并模擬點擊該鏈接以下載圖像。最后，圖像將以PNG格式下載到用戶的設(shè)備上。
請注意，html2canvas庫有一些限制和局限性，例如跨域圖像的限制、CSS樣式的復(fù)雜性等。確保在使用這些庫時仔細測試和驗證您的代碼，并查閱相關(guān)文檔以了解更多細節(jié)和選項。
Java實現(xiàn)根據(jù)svg模版動態(tài)生成圖片
需要Java語言動態(tài)生成圖片
用流程圖簡單說明下我這邊工作中使用的場景
僅供參考
所以這里就需要生成證書了
我先給大家看下最終實現(xiàn)的圖片效果
這里要先說明一下
下面說下我是如何解決的
這種方式是不能實現(xiàn)這個需求的
這個的原理就是對網(wǎng)頁截圖 但只能對于靜態(tài)頁面截圖 不能根據(jù)不同的參數(shù)值動態(tài)生成圖片
所以不提倡使用這種方式
但也介紹下這種使用方式 朋友們根據(jù)自己的實際需求情況有選擇的使用
這是h5代碼
test文件夾下面的內(nèi)容
安裝一個docker nginx 將test文件夾加載到nginx容器的/usr/share/nginx/html目錄下面
docker run --name nginx80 -p 8000:80 -v /tmp/test:/usr/share/nginx/html -d docker.io/nginx
訪問的頁面效果
這張圖片是截圖生成的圖片 但url中的id值并沒有傳給頁面
在h5代碼中請求后端接口獲取數(shù)據(jù)動態(tài)顯示出來也是不可以的
所以這種方式使用局限性很窄
大致原理是 通過http請求該url獲取該url的文件流然后解析h5代碼生成圖片
其實現(xiàn)原理大致為 讀取svg document h5代碼 將動態(tài)參數(shù)map解析到h5代碼中 轉(zhuǎn)換成字節(jié)數(shù)組 生成圖片格式
我本地是mac系統(tǒng)沒有這個問題 在發(fā)布到測試環(huán)境linux系統(tǒng)出現(xiàn)了這個問題
先看下問題的現(xiàn)象
看到了沒 生成的圖片中文全是亂碼
原因是因為linux系統(tǒng)沒有中文字體
既然linux系統(tǒng)沒有中文字體 那么就安裝它嘛 let's 盤它?。。?/p>
brew install fontconfig
fc-list :lang=zh (注意‘：’前的空格)
mac環(huán)境默認會安裝很多中文字體
yum -y install fontconfig
fc-list :lang=zh
果然沒有中文字體
a 先在mac系統(tǒng)中找到字體安裝目錄
/System/Library/Fonts
b 找到宋體對應(yīng)的文件
c 將該文件上傳到linux指定的目錄下
/usr/share/fonts/chinese
d 賦予文件夾操作權(quán)限
chmod -R 755 /usr/share/fonts/chinese
e 安裝ttmkfdir來搜索目錄中所有的字體信息，并匯總生成fonts.scale文件
yum -y install ttmkfdir
ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
vi /etc/fonts/fonts.conf
添加
<dir>/usr/share/fonts/chinese</dir>
fc-cache
a 找到j(luò)dk所在的安裝目錄
echo $JAVA_HOME
b 將宋體文件復(fù)制過來
cp /usr/share/fonts/chinese/STHeiti\ Light.ttc /usr/local/software/jdk1.8.0_141/jre/lib/fonts/fallback
fallback代表存放后備語言的文件夾
https://gitee.com/pingfanrenbiji/resource/tree/master/image
注意: 引入的依賴問題
<!--phantomjs -->
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>2.53.1</version>
</dependency>
<dependency>
<groupId>com.github.detro</groupId>
<artifactId>ghostdriver</artifactId>
<version>2.1.0</version>
</dependency>
<!--svg-->
<dependency>
<groupId>com.github.hui.media</groupId>
<artifactId>svg-core</artifactId>
<version>2.5</version>
</dependency>
這些依賴jar包我是上傳到了公司的私服上了
若是朋友們下拉不下來
我提供給大家這些底層jar包的實現(xiàn)源碼
https://gitee.com/pingfanrenbiji/quick-media
自行上傳到自己的私服即可
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
