網頁截圖和svg模版動態生成圖片Java實現

2021-02-13 平凡人筆記

使用場景

需要Java語言動態生成圖片

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

僅供參考

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

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

這裡要先說明一下

圖片上的文字都是動態變化的即不同的訂單對應的圖片內容都不一樣

下面說下我是如何解決的

通過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

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

相關焦點

  • 更多體驗 美圖秀秀網頁版新增不規則拼圖模版
    在美圖秀秀網頁版裡可以實現很便捷的在線拼圖應用,比如長幅拼接圖和自由拼圖,都可以通過在線的方式來生成。不僅如此,美圖秀秀網頁版還為我們提供了許多拼圖模版,可以讓大家拼出更多的個性圖片來。而為了進一步豐富大家的在線選擇,美圖秀秀網頁版近期又在「模版拼圖」裡新增了一些不規則拼圖模塊。
  • 怎麼自動生成背景圖案?試試這幾款背景生成工具
    提供一些基本選項,包括波浪類型、位置、顏色、透明度、密度等等,調整後會立即在網頁中產生效果預覽,最終可以將圖片另存為 svg 矢量圖或產生 svg 代碼。如何使用 Get Waves ?1.打開 Get Waves 下方官網直鏈按鈕。
  • 超3 萬 SVG 圖標大集合!桌面程序,下載即用,可生成字體,PNG/JPG/...
    下載即用,可生成字體,PNG/JPG/ICO/ICNS圖片文件。打開這個連結 所有圖標 就可以確認包含的所有圖標,也可以在線直接下載PNG,JPG,ICO和Apple的ICNS圖片!下載桌面版本,不用安裝Node.JS,也不需要懂npm就可以直接滑鼠操作,批量生成字體和圖片文件。
  • 微信對話截圖怎麼生成?6款好用的微信對話生成器
    一、玩截圖微信對話生成器網頁版支持外觀設置和對話設置,具體內容包括:(一)外觀設置1、信號強度:1格2格3格4格5格2、運營商:中國移動中國聯通中國電信3、網絡信號:無WifiGE3G4G4、手機時間:5、鎖定旋轉:顯示不顯示6、電量:+7、電池狀態:正常充電中
  • 如何實現整個網頁的完整截圖
    WINDOWS 系統頁面截圖方法MAC 系統頁面截圖方法QQ 完整網頁截圖法相信大家對於屏幕截圖已經駕輕就熟了,但是對於整個頁面的完整截圖就不一定那麼熟悉了。一般的截圖就只能截取當前屏幕的展示範圍,整個網頁的內容是無法獲取的。而當有些場景需要用到整個頁面截圖的時候就相當頭痛了。
  • HTML5摘要:要繪製和移動的canvas元素,svg元素
    一個canvas元素,允許您在不使用圖像的情況下繪製圖片·移動它以前,當您想要顯示圖形和圖片時,只有一種方法可以創建圖像文件並使用img元素顯示它。此外,如果您想要複雜的動畫,您必須使用特殊軟體創建Flash等。
  • 朋友圈轉發截圖生成工具
    點擊藍字 關注我們 不給糖就搗亂不知道大家有沒有被「朋友圈」或者營銷人員困擾過,他們往往有一個共同特點,就是為要求你轉發截圖或者某個文章用戶名:這裡填寫您的微信名,默認為:A 營銷號免費廣告姬頭像:您的微信頭像正文:填寫您所需要寫的內容,例如:很實用的教程[微笑]需要收集五個贊 謝謝大家啦~( ^ω^)截圖類型
  • 【JavaEE】Java SDK實現圖片質量壓縮
    本篇文章主要講的是通過Java SDK實現對圖片的質量壓縮,即圖片尺寸不變,壓縮圖片文件大小。而在本例中主要是徵對PNG圖片而言,再說Java SDK實現圖片質量壓縮之前,要先了解常見圖片的一些特性。,它的色彩還原度比較好,可以支持適當壓縮後保持比較好的色彩度,如果你圖片顏色很多的,建議使用這個圖片格式,可以使生成的圖片大小比較小而不會使圖片看起來很模糊(失真) 。
  • Java、JavaScript、PHP、Python是什麼?能開發什麼?
    java在手機領域發展也很廣泛,還記得當年的三星滑蓋手機裡全都是java開發的小遊戲,現在更是成為了安卓智能機的程式語言。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。
  • 支持矢量圖SVG格式,圖再放大也不會模糊了
    好多人是QQ截圖的,看起來清晰,但放大後就模糊了。為什麼呢?先給大家科普一下圖片的數位化方式。第一種方案是位圖,格式有JPEG/JPG, GIF, TIFF, PNG, BMP等。第二種方案為矢量圖,格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等。除了大大節省空間,矢量圖還具有完美的伸縮性。
  • 使用java的html解析器實現自動重複抓取任意網站頁面
    使用java的html解析器實現自動重複抓取任意網站頁面 在線演示    本地下載如果你曾經開發過內容聚合類網站的話,使用程序動態整合來自不同頁面或者網站內容的功能肯定對於你來說非常熟悉
  • SVG之旅:SVG線條動畫實現原理
    ,我想你和我一會,感覺要瘋了。有關於animation-fill-mode的詳細介紹,可以閱讀早前整理的相關教程《你所不知道的animation-fill-mode細節》和《理解animation-fill-mode屬性》。為了更好的理解SVG的stroke、stroke-dasharray和stroke-dashoffset相關的知識。
  • HTML5/CSS3系列教程:使用SVG圖片
    文件非常小能夠無損失的縮放尺寸在Retina顯示屏上效果超棒能夠控制圖片樣式設計,例如互動和過濾filter瀏覽器支持Modernizr.svg) {$(「.gblogo img」).attr(「src」, 「images/logo.png」);}或者使用如下更簡單的代碼:<img src=「gblogo.svg」 onerror=「this.onerror=null; this.src=」gblogo.png
  • 線條之美,玩轉SVG線條動畫
    svg動畫;同樣svg也提供了不少的API來實現動畫效果,並且兼容性也不差,本文主要講解一下如何製作svg線條動畫。,只用了css3和svg,沒有使用一行javascript代碼,這一點和canvas比起來要容易一些,下面就說明一下實現這些效果的原理。
  • CGLib首頁、文檔和下載 - Java動態代理 - OSCHINA - 中文開源技術...
    cglib大名在java界如雷貫耳,眾多優秀的開源項目均使用其來實現各自的功能(spring aop,hibernate等等),這裡主要簡單介紹一下cglib的使用,對比一下java原生的proxy還有javaassist. 說到cglib第一印象就是動態代理(啥是動態代理?
  • 深入淺出Rhino:Java與JS互操作
    它首先將原始碼編譯成二進位字節碼(bytecode),然後依賴各種不同平臺上的虛擬機來解釋執行字節碼,從而實現了「一次編譯、到處執行」的跨平臺特性。  JavaScript是一種動態、弱類型、基於原型的客戶端腳本語言。
  • 性能優化:用FreeMarker實現頁面靜態化
    這其中有什麼樣的技術手段使得這些大型的動態網站能夠有如此高的性能呢?目前提升網站性能的方法通常有HTML靜態化、圖片伺服器分離、資料庫集群、負載均衡、代碼優化、壓縮JS和CSS文件等等。其中HTML靜態化的目的其實就是降低HTTP請求個數從而降低資料庫的操作從而達到提高網站運行速度,這也是一個最有效的提升網站性能的方法之一。
  • 基於逐浪CMS開發的字體在線生成平臺
    基於逐浪CMS開發的一款字體大師工具,支持在線寫字,可用pc、各種觸控設備、手機等,訪問網頁即可在線寫字,體驗網址:字體大師- 字體大師為達到更高的書寫效果,建議用ipad,對接專業的Apple Pencil等可達到更高的書寫效果和質量。
  • C/C++、Java、JavaScript、PHP、Python分別用來開發什麼?
    總結:Java:網頁, 企業級開發, 普通應用軟體, 遊戲後臺。目前而言,C語言主要用來開發底層模塊(比如驅動、解碼器、算法實現),服務應用(比如web伺服器)和嵌入式應用(比如微波爐裡的程序)。C++也可以做這些,不過由於C++的複雜性和標準問題,人們還是更願意使用C來做。