拼合页面生成海报图片

请教高手，想做一个类似于网上很多上传自拍照，然后输入点文字，自动套上后台的相册模板，然后生成一张海报图片，可以另存到手机相册中，转发朋友圈能选择到这张图片就可以。问题是：怎么把页面上的背景图片、上传的图像、文本框内容 一块保存成图片？或者说有更好的思路也可以。

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文件中上传，否则会报一个前端错误的。

可不可以通过js实现截图保存

wangpenga 发表于 2022-1-13 16:54
可不可以通过js实现截图保存

好像可以用canvas画出来，我不懂呀，大佬能给写一下吗

您好，这个问题我们还需要再研究一下，有了结果在论坛再给您回复哦。

Howie.Sun 发表于 2022-1-13 18:30
您好，这个问题我们还需要再研究一下，有了结果在论坛再给您回复哦。

好的 大佬，等你好消息

Howie.Sun 发表于 2022-1-14 11:58
您好，咱们可以通过html2canvas.js和Canvas2Image.js来实现这个功能。
canvas2image.js下载地址：GitHub ...

大佬，太牛叉了，非常感谢，我研究一下。

leilei6120 发表于 2022-1-14 13:49
大佬，太牛叉了，非常感谢，我研究一下。

不客气哈，感谢您对活字格的支持。
后面有问题，欢迎继续发新帖交流

Howie.Sun 发表于 2022-1-14 13:52
不客气哈，感谢您对活字格的支持。
后面有问题，欢迎继续发新帖交流

大佬，不好意思，还要打扰一下。你给我的版本有点高，我打不开。我是这样操作的：1，引入2个js库文件。2，添加js命令，粘贴你给的代码。运行后，提示错误呢，看错误应该是js文件有语法错误，导致Canvas2Image对象未被正确识别。另外，看这段js代码的话，会自动在body里添加一个canvas元素，运行之后是追加到页面后边的，这个怎么处理一下，隐藏起来？

leilei6120 发表于 2022-1-14 17:32
大佬，不好意思，还要打扰一下。你给我的版本有点高，我打不开。我是这样操作的：1，引入2个js库文件。2 ...

canvas2image.js文件您在页面设置的JS文件中加入应该可以解决控制台报错的问题。
我是为了看一下html转为canvas效果呢，您可以试试把canvas元素隐藏起来，后续还可以优化一下清晰度。