Html js将网页转成图片

将网页转换为图片，您可以使用一些库和工具来实现。在前端开发中，常用的库包括html2canvas和dom-to-image。这些库允许您将HTML元素转换为图像。

下面是使用html2canvas库将网页转换为图像的示例代码：

<!DOCTYPE html>  
<html>  
<head>  
  <title>Convert Webpage to Image</title>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>  
</head>  
<body>  
  <div id="capture">  
    <!-- 在这里放置您想要转换为图像的HTML内容 -->  
    <h1>Hello, World!</h1>  
    <p>This is an example of converting a webpage to an image.</p>  
  </div>  
  
  <button onclick="convertToImage()">Convert to Image</button>  
  
  <script>  
    function convertToImage() {  
      html2canvas(document.getElementById("capture")).then(canvas => {  
        var img = canvas.toDataURL("image/png");  
        var link = document.createElement("a");  
        link.href = img;  
        link.download = "webpage.png";  
        link.click();  
      });  
    }  
  </script>  
</body>  
</html>

上述代码使用html2canvas库来将id为"capture"的div元素转换为图像。当用户点击"Convert to Image"按钮时，convertToImage()函数会被调用。该函数使用html2canvas对指定的HTML元素进行截图，并将结果转换为一个包含图像数据的URL。然后，创建一个隐藏的链接元素，将图像数据URL设置为链接的href属性，并模拟点击该链接以下载图像。最后，图像将以PNG格式下载到用户的设备上。

请注意，html2canvas库有一些限制和局限性，例如跨域图像的限制、CSS样式的复杂性等。确保在使用这些库时仔细测试和验证您的代码，并查阅相关文档以了解更多细节和选项。

Java实现根据svg模版动态生成图片

使用场景

需要Java语言动态生成图片

用流程图简单说明下我这边工作中使用的场景

仅供参考

所以这里就需要生成证书了

我先给大家看下最终实现的图片效果

这里要先说明一下

图片上的文字都是动态变化的即不同的订单对应的图片内容都不一样
图片上还可以嵌入图片哦比如上图的logo图片

下面说下我是如何解决的

通过PhantomJS来实现

这种方式是不能实现这个需求的

这个的原理就是对网页截图但只能对于静态页面截图不能根据不同的参数值动态生成图片

所以不提倡使用这种方式

但也介绍下这种使用方式朋友们根据自己的实际需求情况有选择的使用

通过html代码实现图片的效果放入web容器(比如nginx)中部署

这是h5代码

test文件夹下面的内容

安装一个docker nginx 将test文件夹加载到nginx容器的/usr/share/nginx/html目录下面

docker run --name nginx80  -p 8000:80  -v /tmp/test:/usr/share/nginx/html -d docker.io/nginx

访问的页面效果

访问该页面进行截图

这张图片是截图生成的图片但url中的id值并没有传给页面

在h5代码中请求后端接口获取数据动态显示出来也是不可以的

所以这种方式使用局限性很窄

简单介绍下代码原理

大致原理是通过http请求该url获取该url的文件流然后解析h5代码生成图片

通过SVG模版动态生成

先写svg模版（其实也是h5代码）

读取svg模版动态传入参数生成图片

其实现原理大致为读取svg document h5代码将动态参数map解析到h5代码中转换成字节数组生成图片格式

Linux环境图片中文乱码

我本地是mac系统没有这个问题在发布到测试环境linux系统出现了这个问题

先看下问题的现象

看到了没生成的图片中文全是乱码

原因是因为linux系统没有中文字体

既然linux系统没有中文字体那么就安装它嘛 let's 盘它！！！

先看下mac环境的字体情况

安装字体管理工具

brew install fontconfig

查看支持中文

fc-list :lang=zh    (注意‘：’前的空格)

mac环境默认会安装很多中文字体

再看下linux环境

安装字体管理工具

yum -y install fontconfig

查看支持中文

fc-list :lang=zh

果然没有中文字体

开始安装中文字体

将mac环境的宋体上传到linux环境

a 先在mac系统中找到字体安装目录

/System/Library/Fonts

b 找到宋体对应的文件

c 将该文件上传到linux指定的目录下

/usr/share/fonts/chinese

d 赋予文件夹操作权限

chmod -R 755 /usr/share/fonts/chinese

e 安装ttmkfdir来搜索目录中所有的字体信息，并汇总生成fonts.scale文件

yum -y install ttmkfdir

ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir

修改字体配置文件

vi /etc/fonts/fonts.conf
添加
<dir>/usr/share/fonts/chinese</dir>

刷新内存中的字体缓存

fc-cache

确认是否安装成功

在jdk中安装该宋体

a 找到jdk所在的安装目录

echo $JAVA_HOME

b 将宋体文件复制过来

cp /usr/share/fonts/chinese/STHeiti\ Light.ttc /usr/local/software/jdk1.8.0_141/jre/lib/fonts/fallback

fallback代表存放后备语言的文件夹

重启java服务即可

DEMO代码

https://gitee.com/pingfanrenbiji/resource/tree/master/image

注意: 引入的依赖问题

  <!--phantomjs -->
  <dependency>
   <groupId>org.seleniumhq.selenium</groupId>
   <artifactId>selenium-java</artifactId>
   <version>2.53.1</version>
  </dependency>
  <dependency>
   <groupId>com.github.detro</groupId>
   <artifactId>ghostdriver</artifactId>
   <version>2.1.0</version>
  </dependency>

  <!--svg-->
  <dependency>
   <groupId>com.github.hui.media</groupId>
   <artifactId>svg-core</artifactId>
   <version>2.5</version>
  </dependency>

这些依赖jar包我是上传到了公司的私服上了

若是朋友们下拉不下来

我提供给大家这些底层jar包的实现源码

https://gitee.com/pingfanrenbiji/quick-media

自行上传到自己的私服即可

在线咨询

上一篇：PDF如何转换为HTML？这五种快捷方法你试过吗？
下一篇：HTML 颜色

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商