拼合页面生成海报图片

leilei6120 发表于 2022-1-13 20:37
好的 大佬，等你好消息

您好，咱们可以通过html2canvas.js和Canvas2Image.js来实现这个功能。
canvas2image.js下载地址：GitHub - hongru/canvas2image: a tool for saving or converting canvas as img
html2canvas.js下载地址：Releases · niklasvh/html2canvas · GitHub
1.第一步是将html转为canvas。
基于html2canvas.js可将一个元素渲染为canvas，只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有<canvas>元素的promise：

1. html2canvas(document.body).then(function(canvas) {
   
2.     document.body.appendChild(canvas);
   
3. });

复制代码

2.第二步是canvas转image。使用第三方库Canvas2Image.js，调用其Canvas2Image.saveAsPNG方法即可。
生成海报的JS代码：

1. html2canvas(document.body).then(function(canvas) {
   
2.     document.body.appendChild(canvas);
   
3.     // var oCanvas = document.getElementById("canvas");
   
4.    console.log(canvas);
   
5.    Canvas2Image.saveAsPNG(canvas , canvas.width , canvas.height)
   
6. });
   

复制代码

供参考哦，后续您还需要完善一下，比如隐藏canvas及优化清晰度等。
效果：
点击生成海报按钮，可以下载对应的图片。
注意哦：
canvas2image.js的上传路径是在当前页的页面设置的JavaScript文件中上传，否则会报一个前端错误的。