js截图保存俩种方式

最新推荐文章于 2024-08-09 18:00:00 发布

爽、

最新推荐文章于 2024-08-09 18:00:00 发布

阅读量1.2k

点赞数

分类专栏： JAVAUtils

本文链接：https://blog.youkuaiyun.com/weixin_43842590/article/details/104258547

版权

JAVAUtils 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了使用JavaScript进行网页截图的两种方式：一是通过html2canvas库直接保存为图片；二是将canvas转换为数据URL，然后在后端保存。在前端，获取canvas并将其转换为dataURL，后端接收到数据后可以存储到数据库或Redis中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要：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);