html轉化為圖片,並且和另一張圖片合成新的圖片
阿新 • • 發佈:2019-01-02
最近專案裡有一個需求:把kedit裡的html內容和事先設定好的背景顏色轉為圖片,嵌入到一張事先準備好的圖片裡先看下效果
圖1
圖2
圖3 (合成後背景顏色設為藍色)
上面這個需求要分為兩步來完成:
1、把html轉為圖片
2、在圖片2上畫圖片1
先說步驟1:
能將html轉為圖片,底層使用java swing中提供的JEditorPane類
開啟html2image-0.9.jar包的HtmlImageGenerator類裡可以看到幾個關鍵的方法我想你應該就理解的差不多了:
protected JEditorPane createJEditorPane() { JEditorPane editorPane = new JEditorPane(); editorPane.setSize(getDefaultSize()); editorPane.setEditable(false); SynchronousHTMLEditorKit kit = new SynchronousHTMLEditorKit(); editorPane.setEditorKitForContentType("text/html", kit); editorPane.setContentType("text/html"); editorPane.addPropertyChangeListener(new PropertyChangeListener() { public void propertyChange(PropertyChangeEvent evt) { if (evt.getPropertyName().equals("page")) HtmlImageGenerator.this.onDocumentLoad(); } }); return editorPane; } public void loadUrl(String url) { try { this.editorPane.setPage(url); } catch (IOException e) { throw new RuntimeException(String.format( "Exception while loading %s", new Object[] { url }), e); } } public BufferedImage getBufferedImage() { //注意這個原來的jar包裡沒有,加了這句話避免生成的圖片存在內邊距 editorPane.setMargin(new Insets(0, 0, 0, 0)); Dimension prefSize = this.editorPane.getPreferredSize(); BufferedImage img = new BufferedImage(prefSize.width, this.editorPane.getPreferredSize().height, 2); Graphics2D graphics = img.createGraphics(); this.editorPane.setSize(prefSize); this.editorPane.paint(graphics); return img; } public void saveAsImage(File file) { BufferedImage img = getBufferedImage(); try { String formatName = FormatNameUtil .formatForFilename(file.getName()); ImageIO.write(img, formatName, file); } catch (IOException e) { throw new RuntimeException( String.format("Exception while saving '%s' image", new Object[] { file }), e); } }
說完了原理現在上步驟1的實現程式碼:
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; String html = Content.htmlTemplate.replace("backgroundcolor",carDesignModel1.getCarcorlor()); html=html.replace("baseurl",basePath); html=html.replace("content",carDesignModel1.getContent()); //把html轉為圖片,得到圖1imageKedit HtmlImageGenerator imageGenerator = new HtmlImageGenerator();imageGenerator.loadHtml(html); BufferedImage imageKedit = imageGenerator.getBufferedImage(); //根據url讀取圖片,得到圖2imageOrigin URL u = new URL(Property.getProperty("FILESERVER_PATH")+"id="+carDesignModel1.getPicid()); BufferedImage imageOrigin = ImageIO.read(u);
下面說步驟2:
通過Graphics裡的drawImage重新繪圖並且生成新的圖片
//合成新的圖片
Graphics g=imageOrigin.getGraphics();
//四個引數分別是:圖1橫座標,圖1縱座標,圖1上繪製的圖2的長,圖1上繪製的圖2的寬
g.drawImage(imageKedit,imageOrigin.getWidth()-imageKedit.getWidth(),imageOrigin.getHeight()-imageKedit.getHeight(),imageKedit.getWidth(),imageKedit.getHeight(),null);
OutputStream outImage=new FileOutputStream("D:\\test2.png");
//合成的圖片必須為png否則會導致顏色有所偏差
ImageIO.write(imageOrigin, "png", outImage);
outImage.close();
關於圖片的一些操作的程式碼可以關注參考: