如何通过 Saxon-JS 调整图像大小？
Posted
技术标签:
【中文标题】如何通过 Saxon-JS 调整图像大小？【英文标题】：How can I get image resizing via Saxon-JS? 【发布时间】：2018-06-03 03:00:10 【问题描述】：我有一个通过 javascript 测试图像大小调整的 html 文件。
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
<head>
<title>Image Test</title>
<style type="text/css">
img.img-responsive
display: block;
max-width: 100%;
height: auto;
img.fig
display: block;
max-width: 10000px;
height: auto;
</style>
</head>
<body>
<h2>Image Test</h2>
<p>Image: </p>
<img class="img-responsive" src="img/fig.jpg"/>
<script>
window.addEventListener('load', function()
[].forEach.call(document.getElementsByClassName("img-responsive"),function(elem)
elem.addEventListener('click',toggleClassName.bind(null,elem, "fig"));
);
)
/* Toggle specified class name
elem: DOMElement
className: class name
*/
function toggleClassName(elem, className)
var s = ' ' + className;
if (elem.className.indexOf(className) === -1)
elem.className += s ;
return true;
else
elem.className = elem.className.replace( s , '' );
return false;
</script>
</body>
</html>
这很好用。所以现在我想通过 Saxon-JS 使用 XSLT 样式表做同样的事情。我的第一个样式表如下：
[handle-click.xsl]
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
extension-element-prefixes="ixsl"
exclude-result-prefixes="xs"
version="3.0">
<xsl:template match="img[contains(@class,'img-responsive')]" mode="ixsl:onclick">
<xsl:choose>
<xsl:when test="contains(@class,'fig')">
<ixsl:set-style name="class" select="replace(@class,' fig','')"/>
</xsl:when>
<xsl:otherwise>
<ixsl:set-style name="class" select="concat(@class,' fig')"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
我已经通过 oXygen 19.1 编译了这个样式表并生成了 handle-click.sef 文件。然后我修改了上面的 HTML 以使用 Saxon-JS 库。
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
<head>
<title>Image Test</title>
<style type="text/css">
img.img-responsive
display: block;
max-width: 100%;
height: auto;
img.fig
display: block;
max-width: 10000px;
height: auto;
</style>
</head>
<body>
<h2>Image Test</h2>
<p>Image: </p>
<img class="img-responsive" src="img/fig.jpg"/>
<script>
window.addEventListener('load', function()
SaxonJS.transform(
stylesheetLocation: "handle-click.sef.xml"
);
)
</script>
<script type="text/javascript" src="js/SaxonJS.min.js"></script>
</body>
</html>
但是点击图片什么也没发生。这个 HTML 文件（或样式表）有什么问题？
【问题讨论】：
【参考方案1】：我不确定你为什么尝试使用ixsl:set-style 来操作元素的类，我认为你应该使用元素的DOM classList 属性并使用它的toggle 方法。
我也不确定您是否可以仅使用样式表调用 transform 方法。
您可以在下面找到我使用 Saxon-JS 1.0.2 测试过的示例（在本地使用 Firefox），该示例插入 div（不想使用图像）并调用其 classList toggle 方法，提供要切换的 CSS 类名称作为参数：
<!DOCTYPE HTML>
<html>
<head>
<title>Saxon-JS test</title>
<style type="text/css">
div.responsive
border: 5px solid green;
display: block;
max-width: 100%;
height: auto;
div.fig
border: 10px solid yellow;
</style>
</head>
<body>
<h2>Saxon-JS test</h2>
<section id="saxon-target"></section>
<script>
window.addEventListener('load', function()
SaxonJS.transform(
stylesheetLocation: "test2017122001.sef.xsl",
initialTemplate: "Qhttp://www.w3.org/1999/XSL/Transforminitial-template"
);
)
</script>
<script type="text/javascript" src="../../Saxon-JS-1.0.2/SaxonJS.min.js"></script>
</body>
</html>
XSLT 是
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
extension-element-prefixes="ixsl"
exclude-result-prefixes="xs"
version="3.0">
<xsl:template name="xsl:initial-template">
<xsl:result-document href="#saxon-target">
<div class="responsive">This is a test.</div>
</xsl:result-document>
</xsl:template>
<xsl:template match="div[contains(@class,'responsive')]" mode="ixsl:onclick">
<xsl:sequence select="ixsl:call(ixsl:get(., 'classList'), 'toggle', ['fig'])[current-date() lt xs:date('2000-01-01')]"/>
</xsl:template>
</xsl:stylesheet>
单击div 时会应用 CSS 样式更改（例如边框颜色和宽度更改），这样可以帮助您为要操作其 classList 的 img 设置类似的代码。
Example 现在也在 https://martin-honnen.github.io/xslt/2017/test2017122001.html 上在线，并且可以在 Windows 10 上与当前版本的 Edge、IE、Chrome 和 Firefox 一起使用。
【讨论】：
以上是关于如何通过 Saxon-JS 调整图像大小？的主要内容，如果未能解决你的问题，请参考以下文章