html css格式用易语言生成图片的问题

louxu163 · 发表于 2025-2-22 00:18:16

用以下html加JS可以将html元素生成图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to Image</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f0f0f0;">
      <h1>Hello, World!</h1>
      <p>This is an example of HTML to Image.</p>
</div>
<button>Capture</button>
<script>
function capture() {
const tempDiv = document.createElement("div");
tempDiv.innerHTML = '<h1>Hello, World!</h1><p>This is an example of HTML to Image.</p>';
tempDiv.style.position = 'absolute';
tempDiv.style.left = '-9999px';
document.body.appendChild(tempDiv);
html2canvas(tempDiv).then(canvas => {
      const img = document.createElement("img");
      img.src = canvas.toDataURL("image/png");
      document.body.removeChild(tempDiv);
      document.body.appendChild(img);
});
}
</script>
</body>
</html>

如何使用这段html，或者易语言自身的命令实现同样效果，返回图片字节集或者base64

如：将以下元素结合格式生成如下图片

<div id="capture" style="padding: 10px; background: #f0f0f0;">
      <h1>Hello, World!</h1>
      <p>This is an example of HTML to Image.</p>
</div>

QQ截图20240412170657.jpg

liwei321gogo · 发表于 2025-2-22 09:31:09

截图呗，使用快照 (, , )，返回的就是图片字节集

liwei321gogo · 发表于 2025-2-22 11:25:10

子程序名	返回值类型	公开	备注
_按钮1_被单击

画板1.字体.加粗＝真
画板1.字体.字体大小＝ 30
画板1.定位写出 (画板1.宽度 ÷ 2 －画板1.取宽度 (“Hello, World!”) ÷ 2, 10, “Hello, World!”)
画板1.字体.加粗＝假
画板1.字体.字体大小＝ 18
画板1.定位写出 (画板1.宽度 ÷ 2 －画板1.取宽度 (“This is an example of HTML to Image.”) ÷ 2, 50, “This is an example of HTML to Image.”)
快照 (画板1.取窗口句柄 (), , ) ' 这里返回的是图片数据

是这样吗？

louxu163 · 发表于 2025-2-22 12:44:20

liwei321gogo 发表于 2025-2-22 11:25
[e=4].版本 2

.子程序 _按钮1_被单击

实际的需求是html+CSS代码，在网页上显示的内容以及样式，通过易语言，生成同样的图片，类似于页面截图，但是不通过填表实现，也不通过易语言组件实现，因为实际应用中需要多线程，你给出的这种方法可以简单显示出来文字，但是没办法灵活的还原更多html中的CSS样式

周小杰来也 · 发表于 2025-2-22 18:33:47

liwei321gogo 发表于 2025-2-22 11:25
[e=4].版本 2

.子程序 _按钮1_被单击

他的意思大概是通过易语言执行网页代码然后生成的图片可以返回给易语言的变量

xizhihan · 发表于 2025-4-6 12:24:34

方法1 HTML2Canvas

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
    <div id="capture" style="padding: 10px; background: #f0f0f0;">
        <h1>Hello, World!</h1>
        <p>This is an example of HTML to Image.</p>
    </div>
    <script>
    // 自动执行转换
    html2canvas(document.querySelector("#capture")).then(canvas => {
        const base64 = canvas.toDataURL("image/png");
        // 调用易语言的外部接口
        if (window.external && typeof window.external.ReceiveBase64 === 'function') {
            window.external.ReceiveBase64(base64);
        }
    });
    </script>
</body>
</html>

窗口程序集名	保留	保留	备注
窗口程序集_启动窗口
变量名	类型	数组	备注
浏览器	网页浏览器

子程序名	返回值类型	公开	备注
__启动窗口_创建完毕

浏览器.跳转 (“about:blank”, , )
浏览器.静默＝真
' 注册外部对象
浏览器.注册外部对象 (“external”, &外部对象接口)
' 加载HTML内容
浏览器.写文档 (HTML内容, ) ' 将上述HTML代码存入变量HTML内容

子程序名	返回值类型	公开	备注
外部对象接口
参数名	类型	参考	可空	数组	备注
方法名	文本型
参数	文本型

.如果真方法名＝ “ReceiveBase64”
' 参数为base64字符串
图片Base64 ＝参数
' 转换为字节集
图片字节集＝ BASE64解码 (图片Base64)
' 处理字节集...

方法2（推荐）
https://wkhtmltopdf.org/
这里下载这个工具

子程序名	返回值类型	公开	备注
生成图片

变量名	类型	静态	数组	备注
HTML内容	文本型
临时文件	文本型
输出图片	文本型

HTML内容＝ “那个HTML的内容
”
临时文件＝取临时目录 () ＋ “\temp.html”
输出图片＝取临时目录 () ＋ “\output.png”
写到文件 (临时文件, 到字节集 (HTML内容))
运行 (“wkhtmltoimage.exe ” ＋临时文件＋ “ ” ＋输出图片, 真, #隐藏窗口 )

如果真 (文件是否存在 (输出图片))

图片字节集＝读入文件 (输出图片)

' 或者转为Base64

图片Base64 ＝ BASE64编码 (图片字节集)

		自动登录	找回密码
密码			注册

[求助] html css格式用易语言生成图片的问题

点评

浏览过的版块