Html js將網頁轉成圖片

將網頁轉換為圖片，您可以使用一些庫和工具來實現。在前端開發中，常用的庫包括html2canvas和dom-to-image。這些庫允許您將HTML元素轉換為圖像。

下面是使用html2canvas庫將網頁轉換為圖像的示例代碼：

<!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">  
    <!-- 在這里放置您想要轉換為圖像的HTML內容 -->  
    <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元素轉換為圖像。當用戶點擊"Convert to Image"按鈕時，convertToImage()函數會被調用。該函數使用html2canvas對指定的HTML元素進行截圖，并將結果轉換為一個包含圖像數據的URL。然后，創建一個隱藏的鏈接元素，將圖像數據URL設置為鏈接的href屬性，并模擬點擊該鏈接以下載圖像。最后，圖像將以PNG格式下載到用戶的設備上。

請注意，html2canvas庫有一些限制和局限性，例如跨域圖像的限制、CSS樣式的復雜性等。確保在使用這些庫時仔細測試和驗證您的代碼，并查閱相關文檔以了解更多細節和選項。

Java實現根據svg模版動態生成圖片

使用場景

需要Java語言動態生成圖片

用流程圖簡單說明下我這邊工作中使用的場景

僅供參考

所以這里就需要生成證書了

我先給大家看下最終實現的圖片效果

這里要先說明一下

圖片上的文字都是動態變化的即不同的訂單對應的圖片內容都不一樣
圖片上還可以嵌入圖片哦比如上圖的logo圖片

下面說下我是如何解決的

通過PhantomJS來實現

這種方式是不能實現這個需求的

這個的原理就是對網頁截圖但只能對于靜態頁面截圖不能根據不同的參數值動態生成圖片

所以不提倡使用這種方式

但也介紹下這種使用方式朋友們根據自己的實際需求情況有選擇的使用

通過html代碼實現圖片的效果放入web容器(比如nginx)中部署

這是h5代碼

test文件夾下面的內容

安裝一個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代碼中請求后端接口獲取數據動態顯示出來也是不可以的

所以這種方式使用局限性很窄

簡單介紹下代碼原理

大致原理是通過http請求該url獲取該url的文件流然后解析h5代碼生成圖片

通過SVG模版動態生成

先寫svg模版（其實也是h5代碼）

讀取svg模版動態傳入參數生成圖片

其實現原理大致為讀取svg document h5代碼將動態參數map解析到h5代碼中轉換成字節數組生成圖片格式

Linux環境圖片中文亂碼

我本地是mac系統沒有這個問題在發布到測試環境linux系統出現了這個問題

先看下問題的現象

看到了沒生成的圖片中文全是亂碼

原因是因為linux系統沒有中文字體

既然linux系統沒有中文字體那么就安裝它嘛 let's 盤它！！！

先看下mac環境的字體情況

安裝字體管理工具

brew install fontconfig

查看支持中文

fc-list :lang=zh    (注意‘：’前的空格)

mac環境默認會安裝很多中文字體

再看下linux環境

安裝字體管理工具

yum -y install fontconfig

查看支持中文

fc-list :lang=zh

果然沒有中文字體

開始安裝中文字體

將mac環境的宋體上傳到linux環境

a 先在mac系統中找到字體安裝目錄

/System/Library/Fonts

b 找到宋體對應的文件

c 將該文件上傳到linux指定的目錄下

/usr/share/fonts/chinese

d 賦予文件夾操作權限

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

確認是否安裝成功

在jdk中安裝該宋體

a 找到jdk所在的安裝目錄

echo $JAVA_HOME

b 將宋體文件復制過來

cp /usr/share/fonts/chinese/STHeiti\ Light.ttc /usr/local/software/jdk1.8.0_141/jre/lib/fonts/fallback

fallback代表存放后備語言的文件夾

重啟java服務即可

DEMO代碼

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包的實現源碼

https://gitee.com/pingfanrenbiji/quick-media

自行上傳到自己的私服即可

在線咨詢

上一篇：PDF如何轉換為HTML？這五種快捷方法你試過嗎？
下一篇：HTML 顏色

您的項目需求

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

整合營銷服務商