0230112星期四:
主要利用了H5的canvas功能,分为 2个js文件 html2canvas.js和canvas2image.js
项目源码的压缩包会在文章的最底部分享给大家。
界面代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html2image</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./html2canvas.js"></script>
<script src="./canvas2image.js"></script>
<script>
$(document).ready(function () {
$("#saveAsImage").click(function (e) {
saveHtml2Image("div1", 1);
});
});
function saveHtml2Image(objId, scale) {
document.body.scrollTop = 0;
var obj = $("body");
var width = obj.width();;
var height = obj.height();
var scaledCanvas = document.createElement("canvas");
scaledCanvas.width =width;
scaledCanvas.height = height;
scaledCanvas.style.width = width + "px";
scaledCanvas.style.height = height + "px";
var scaledContext = scaledCanvas.getContext("2d");
scaledContext.scale(1, 1);
var width = $(window).width();
var height = $(window).height();
html2canvas(obj, {
canvas: scaledCanvas,
width: width,
height: height,
background: "rgba(255,255,255,1)",
allowTaint:true,
onrendered: function (canvas) {
var dataUrl = Canvas2Image.saveAsJPEG(canvas, parseInt(width * scale), parseInt(height * scale));
obj.html("<img src='"+dataUrl+"' crossOrigin = 'anonymous'>")
}
});
}
</script>
</head>
<body id="div1" style="width:400px">
<div style="color:red;padding:10px 10px;" style="width:400px">
<div>
<span>
我要变图片
</span>
</div>
<div style="clear:both;"></div>
<div>
<span>
我要变图片
</span>
</div>
<div style="clear:both;"></div>
<input type="button" value="saveHtmlAsImage" id="saveAsImage" />
<a href="" id="downloadImage" style="display:none;">downloadImage</a>
</div>
</body>
</html>
当今互联网时代,HTML 和 Markdown 都是非常流行的标记语言。HTML 用于构建网页结构和内容,而 Markdown 则以其简洁易读的语法被广泛用于编写文档、博客文章等。在很多场景下,我们需要将 HTML 内容转换为 Markdown 格式,例如网页内容抓取、文档格式转换等。
Rust 作为一门以安全、性能和可靠性著称的系统级编程语言,也提供了相应的库来处理 HTML 到 Markdown 的转换。本文将介绍一个名为 htmd 的 Rust 库,它提供了一种高效且易于使用的方式来完成这项任务。
htmd 是一个受 JavaScript 库 turndown.js 启发而开发的 Rust 库,用于将 HTML 文档转换为 Markdown 格式。它具有以下特点:
在使用 htmd 之前,我们需要先安装它。将以下依赖项添加到你的 Cargo.toml 文件中:
[dependencies]
htmd = "0.1"
基本转换
使用 htmd 进行 HTML 到 Markdown 的基本转换非常简单。以下代码展示了如何将一个 <h1> 标签转换为 Markdown 中的 # 标题:
use htmd::HtmlToMarkdown;
fn main() {
let markdown = HtmlToMarkdown::new();
let html = "<h1>这是一个标题</h1>";
let result = markdown.convert(html).unwrap();
assert_eq!(result, "# 这是一个标题\n");
}
跳过标签
在某些情况下,我们可能希望跳过 HTML 文档中的某些标签,例如 <script> 和 <style> 标签。htmd 提供了 skip_tags 方法来实现这一点:
use htmd::HtmlToMarkdown;
fn main() {
let markdown = HtmlToMarkdown::builder()
.skip_tags(vec!["script", "style"])
.build();
let html = r#"
<script>
// 一些 JavaScript 代码
</script>
<h1>这是一个标题</h1>
"#;
let result = markdown.convert(html).unwrap();
assert_eq!(result, "# 这是一个标题\n");
}
自定义标签处理器
htmd 允许我们自定义标签处理器来处理特定的 HTML 标签。例如,我们可以定义一个处理器将 <img> 标签转换为 Markdown 中的图片语法:
use htmd::{HtmlToMarkdown, HandleResult};
use html5ever::tendril::StrTendril;
use html5ever::QualName;
fn main() {
let markdown = HtmlToMarkdown::builder()
.add_handler(
vec!["img"],
|el| {
let src = el
.attrs
.iter()
.find(|(name, _)| name.local.as_ref() == "src")
.map(|(_, value)| value.as_ref());
let alt = el
.attrs
.iter()
.find(|(name, _)| name.local.as_ref() == "alt")
.map(|(_, value)| value.as_ref());
match (src, alt) {
(Some(src), Some(alt)) => Some(format!("", alt, src)),
_ => None,
}
},
)
.build();
let html = r#"<img src="https://example.com/image.jpg" alt="图片描述">"#;
let result = markdown.convert(html).unwrap();
assert_eq!(result, "\n");
}
多线程处理
htmd 支持多线程处理,可以充分利用多核 CPU 的性能来加速转换过程。以下代码展示了如何使用多线程将多个 HTML 文档转换为 Markdown:
use htmd::HtmlToMarkdown;
use std::sync::Arc;
use std::thread;
fn main() {
let markdown = Arc::new(HtmlToMarkdown::new());
let html_docs = vec![
"<h1>文档 1</h1>",
"<h2>文档 2</h2>",
"<h3>文档 3</h3>",
];
let threads: Vec<_> = html_docs
.into_iter()
.map(|html| {
let markdown = markdown.clone();
thread::spawn(move || {
let result = markdown.convert(html).unwrap();
println!("{}", result);
})
})
.collect();
for thread in threads {
thread.join().unwrap();
}
}
htmd 是一个功能强大且易于使用的 Rust 库,用于将 HTML 文档转换为 Markdown 格式。它提供了丰富的选项、自定义标签处理器和多线程支持,可以满足各种转换需求。如果你正在寻找一种高效可靠的 HTML 到 Markdown 转换解决方案,htmd 绝对值得一试。
*请认真填写需求信息,我们会在24小时内与您取得联系。