js截图保存俩种方式

需要：html2canvas.js和canvas2image.js

获取canvas

html2canvas(dom).then(function(canvas) {

}

方式一：直接保存

保存图片

Canvas2Image.saveAsImage(canvas, 宽度, 高度, 格式, 文件名);

方式二：java保存

前端

获取图片数据URL

var dataURL = canvas.toDataURL('images/png');

var url = dataURL.substring(22);

//这里我们需要将上面获取的一堆东西截掉前面的“data:image/png;base64,”，只保留后面的

后端

@Override
public void uploadScreen(String url) {
   String path = "保存路径";
   BASE64Decoder decoder = new BASE64Decoder();
   try {
      byte[] b = decoder.decodeBuffer(url);
      ByteArrayInputStream bais = new ByteArrayInputStream(b);
      BufferedImage bufferImg = ImageIO.read(bais);
      String fileStr = path + "/1.png";
      File w2 = new File(fileStr);
      ImageIO.write(bufferImg, "png", w2);
   } catch (Exception e) {
      e.printStackTrace();
   }
}

可选：

根据需求，选择数据库,截图一般只会用一次

所以只要把路径保存到redis,没必要sql建表

jedis.set("uploadScreen",fileStr);

 

渲染canvas

$(".toCanvas").after(canvas);

渲染图片

var img = Canvas2Image.convertToImage(canvas, 1200,300);
$("#toPic").after(img);