vue项目：dom节点转图片+后台java保存到本地

vue项目：dom节点转图片+后台java保存到本地

1. 引入html2canvas

   <-->在项目根文件夹下运行</-->
   npm i html2canvas
   

2. 页面中设置一个条件去触发，将dom节点转为base64编码格式的图片

           html2canvas(document.getElementById("需要获取的dom节点的id值"),{useCORS:true}).then((canvas) => {
             var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
           });
   //在这个函数中，变量image就是dom节点生成的的base64编码格式的图片
   

   <!--html页面例子： -->
   	<div id="agreementImg">
           <p style="text-align: center;font-size: 20px"><b>{{ "协议标题" }}</b></p>
           <p style="font-size: 20px">
             <d>{{ "协议内容" }}</d>
           </p>
           <div class="row" style="height: 240px;overflow: scroll;top: 1px" >
             <div class="col-sm-4">
               <img crossorigin="anonymous" :class="style__" :src="image" :width="200" :height="150"/>
             </div>
           </div>
         </div>
   <!--注意：当需要转换为图片的dom节点中存在一个外部的img的时候，需要给img标签上添加属性crossorigin="anonymous" 并且在本地启动服务的时候生成的base64图片回显中该img图片的位置是空白的，属于正常现象，可以部署到服务器上再试一下-->
   

3. java保存base64编码格式的图片

   	/**
        *
        * @param rootDir 文件保存路径
        * @param data base64照片字符串
        * @param filename 文件名(.jpg...)
        * @return 文件真实保存路径
        * 下面这个方法中Datetools工具类获取时间那个方法，底层是依靠hutool工具包的DateUtil实现的
        * 
        */
       public static String saveImage(String rootDir, String data, String filename) {
           String time = DateTools.getNow("yyyy-MM-dd");
           String year = time.split("-")[0];
           String month = time.split("-")[1];
           String day = time.split("-")[2];
           File dir = new File(rootDir + File.separator + year + File.separator + month + File.separator + day);
           FileOutputStream fop = null;
           File file = null;
           if (!dir.exists()) {
               dir.mkdirs();
           }
           try {
               file = new File(dir.getAbsolutePath() + File.separator + DateTools.getNow("yyyy_MM_dd_hh_mm_ss") + filename);
               fop = new FileOutputStream(file);
               byte[] content = Base64Utils.decodeBuffer(data.split(",")[1]);
               fop.write(content);
               fop.flush();
           } catch (Exception e) {
               e.printStackTrace();
           } finally {
               try {
                   if (fop != null) {
                       fop.close();
                   }
               } catch (IOException e) {
                   e.printStackTrace();
               }
           }
           assert file != null;
           return file.getAbsolutePath();
       }
   

   //用到的Base64Utils工具类：
   /**
    * <p>
    * BASE64编码解码工具包
    * </p>
    * <p>
    * 依赖javabase64-1.3.1.jar
    * </p>
    *
    * @author IceWee
    * @date 2012-5-19
    * @version 1.0
    */
   public class Base64Utils {
   
       /**
        * 文件读取缓冲区大小
        */
       private static final int CACHE_SIZE = 1024;
   
       /**
        * <p>
        * BASE64解码
        * </p>
        *
        * @param base64
        * @return
        */
       public static String decode(String base64) {
           return new String(decodeBuffer(base64),StandardCharsets.UTF_8);
       }
       public static byte[] decodeBuffer(String base64) {
           Base64.Decoder decoder = Base64.getDecoder();
           return decoder.decode(base64.getBytes(StandardCharsets.UTF_8));
       }
   
       /**
        * <p>
        * BASE64编码
        * </p>
        *
        * @param bytes
        * @return
        */
       public static String encode(byte[] bytes) {
           return new String(encodeBuffer(bytes),StandardCharsets.UTF_8);
       }
       public static byte[] encodeBuffer(byte[] bytes) {
           Base64.Encoder encoder = Base64.getEncoder();
           return encoder.encode(bytes);
       }
   
       /**
        * <p>
        * BASE64编码
        * </p>
        * <p>
        * 大文件慎用，可能会导致内存溢出
        * </p>
        *
        * @param filePath
        *            文件绝对路径
        * @return
        * @throws Exception
        */
       public static String encodeFile(String filePath) throws Exception {
           byte[] bytes = fileToByte(filePath);
           return encode(bytes);
       }
   
       /**
        * <p>
        * 文件转换为字节数组
        * </p>
        *
        * @param filePath
        *            文件路径
        * @return
        * @throws Exception
        */
       public static byte[] fileToByte(String filePath) throws Exception {
           byte[] data = new byte[0];
           File file = new File(filePath);
           if (file.exists()) {
               FileInputStream in = new FileInputStream(file);
               ByteArrayOutputStream out = new ByteArrayOutputStream(2048);
               byte[] cache = new byte[CACHE_SIZE];
               int nRead = 0;
               while ((nRead = in.read(cache)) != -1) {
                   out.write(cache, 0, nRead);
                   out.flush();
               }
               out.close();
               in.close();
               data = out.toByteArray();
           }
           return data;
       }
   
       /**
        * <p>
        * 字节数据写文件
        * </p>
        *
        * @param bytes
        *            二进制数据
        * @param filePath
        *            文件生成目录
        */
       public static void byteArrayToFile(byte[] bytes, String filePath) throws Exception {
           InputStream in = new ByteArrayInputStream(bytes);
           File destFile = new File(filePath);
           if (!destFile.getParentFile().exists()) {
               destFile.getParentFile().mkdirs();
           }
           destFile.createNewFile();
           OutputStream out = Files.newOutputStream(destFile.toPath());
           byte[] cache = new byte[CACHE_SIZE];
           int nRead = 0;
           while ((nRead = in.read(cache)) != -1) {
               out.write(cache, 0, nRead);
               out.flush();
           }
           out.close();
           in.close();
       }
   
   }