1. 程式人生 > >html轉化為圖片,並且和另一張圖片合成新的圖片

html轉化為圖片,並且和另一張圖片合成新的圖片

最近專案裡有一個需求:把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();
                    

關於圖片的一些操作的程式碼可以關注參考: