计算脚本图片展示及限制高宽自动调整

本文档内容来源于 http://doc.myapps.cn/docs/common-script/common-script-1f1a52v5q505m

脚本说明

该脚本用于在计算脚本中展示图片，并自动调整图片的高宽以适应容器，同时保持图片的原始比例。

常见实现方式

方式1：基本图片展示（限制最大宽高）

(function(){
    var imageUrl = "图片URL";
    var maxWidth = 500;  // 最大宽度
    var maxHeight = 400; // 最大高度

    var html = "<img src='" + imageUrl + "' " +
               "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
               "width: auto; height: auto; display: block;'>";

    return html;
})();

方式2：图片自适应容器

(function(){
    var imageUrl = "图片URL";
    var containerWidth = 100;  // 容器宽度百分比
    var containerHeight = 100; // 容器高度百分比

    var html = "<img src='" + imageUrl + "' " +
               "style='max-width: " + containerWidth + "%; max-height: " + containerHeight + "%; " +
               "width: auto; height: auto; object-fit: contain;'>";

    return html;
})();

方式3：使用CSS类控制图片大小

(function(){
    var imageUrl = "图片URL";
    var maxWidth = 500;
    var maxHeight = 400;

    var html = "<style>" +
               ".auto-resize-img { " +
               "  max-width: " + maxWidth + "px; " +
               "  max-height: " + maxHeight + "px; " +
               "  width: auto; " +
               "  height: auto; " +
               "  display: block; " +
               "}" +
               "</style>" +
               "<img src='" + imageUrl + "' class='auto-resize-img'>";

    return html;
})();

方式4：从文档字段获取图片URL

(function(){
    var doc = getCurrentDocument();
    var imageUrl = doc.getItemValueAsString("图片字段");

    if(imageUrl == null || imageUrl.trim().length == 0){
        return "未设置图片";
    }

    var maxWidth = 500;
    var maxHeight = 400;

    var html = "<img src='" + imageUrl + "' " +
               "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
               "width: auto; height: auto; display: block;'>";

    return html;
})();

扩展示例

示例1：多张图片展示

(function(){
    var doc = getCurrentDocument();
    var imageField = doc.getItemValueAsString("图片字段");

    if(imageField == null || imageField.trim().length == 0){
        return "未设置图片";
    }

    // 假设图片字段存储的是JSON数组格式
    var JSONArray = new Packages.org.json.JSONArray(imageField);
    var maxWidth = 300;
    var maxHeight = 300;

    var html = "<div style='display: flex; flex-wrap: wrap; gap: 10px;'>";

    for(var i = 0; i < JSONArray.length(); i++){
        var imageObj = JSONArray.get(i);
        var imageUrl = imageObj.getString("path");

        html += "<img src='" + imageUrl + "' " +
                "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
                "width: auto; height: auto; border: 1px solid #ccc;'>";
    }

    html += "</div>";

    return html;
})();

示例2：图片点击放大

(function(){
    var imageUrl = "图片URL";
    var maxWidth = 500;
    var maxHeight = 400;

    var html = "<style>" +
               ".image-container { cursor: pointer; } " +
               ".image-container img { " +
               "  max-width: " + maxWidth + "px; " +
               "  max-height: " + maxHeight + "px; " +
               "  width: auto; height: auto; " +
               "} " +
               "</style>" +
               "<div class='image-container' onclick='window.open(\"" + imageUrl + "\", \"_blank\")'>" +
               "<img src='" + imageUrl + "'>" +
               "</div>";

    return html;
})();

示例3：图片懒加载

(function(){
    var imageUrl = "图片URL";
    var maxWidth = 500;
    var maxHeight = 400;

    var html = "<img src='" + imageUrl + "' " +
               "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
               "width: auto; height: auto;' " +
               "loading='lazy' " +
               "onerror='this.style.display=\"none\"'>";

    return html;
})();

示例4：响应式图片展示

(function(){
    var imageUrl = "图片URL";

    var html = "<style>" +
               "@media (max-width: 768px) { " +
               "  .responsive-img { max-width: 100%; max-height: 300px; } " +
               "} " +
               "@media (min-width: 769px) { " +
               "  .responsive-img { max-width: 500px; max-height: 400px; } " +
               "} " +
               ".responsive-img { " +
               "  width: auto; height: auto; display: block; " +
               "} " +
               "</style>" +
               "<img src='" + imageUrl + "' class='responsive-img'>";

    return html;
})();

示例5：图片居中显示

(function(){
    var imageUrl = "图片URL";
    var maxWidth = 500;
    var maxHeight = 400;

    var html = "<div style='text-align: center;'>" +
               "<img src='" + imageUrl + "' " +
               "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
               "width: auto; height: auto; display: inline-block;'>" +
               "</div>";

    return html;
})();

示例6：图片带标题和描述

(function(){
    var doc = getCurrentDocument();
    var imageUrl = doc.getItemValueAsString("图片字段");
    var imageTitle = doc.getItemValueAsString("图片标题");
    var imageDesc = doc.getItemValueAsString("图片描述");
    var maxWidth = 500;
    var maxHeight = 400;

    var html = "<div style='text-align: center;'>";

    if(imageTitle != null && imageTitle.trim().length > 0){
        html += "<h4>" + imageTitle + "</h4>";
    }

    html += "<img src='" + imageUrl + "' " +
            "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
            "width: auto; height: auto; display: block; margin: 0 auto;'>";

    if(imageDesc != null && imageDesc.trim().length > 0){
        html += "<p style='color: #666; font-size: 12px;'>" + imageDesc + "</p>";
    }

    html += "</div>";

    return html;
})();

示例7：图片轮播展示

(function(){
    var doc = getCurrentDocument();
    var imageField = doc.getItemValueAsString("图片字段");

    if(imageField == null || imageField.trim().length == 0){
        return "未设置图片";
    }

    var JSONArray = new Packages.org.json.JSONArray(imageField);
    var maxWidth = 500;
    var maxHeight = 400;

    var html = "<div id='imageCarousel' style='position: relative; max-width: " + maxWidth + "px; margin: 0 auto;'>";

    for(var i = 0; i < JSONArray.length(); i++){
        var imageObj = JSONArray.get(i);
        var imageUrl = imageObj.getString("path");
        var display = i == 0 ? "block" : "none";

        html += "<img src='" + imageUrl + "' " +
                "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
                "width: auto; height: auto; display: " + display + ";'>";
    }

    html += "</div>";

    return html;
})();

示例8：图片缩略图列表

(function(){
    var doc = getCurrentDocument();
    var imageField = doc.getItemValueAsString("图片字段");

    if(imageField == null || imageField.trim().length == 0){
        return "未设置图片";
    }

    var JSONArray = new Packages.org.json.JSONArray(imageField);
    var thumbnailWidth = 150;
    var thumbnailHeight = 150;

    var html = "<div style='display: flex; flex-wrap: wrap; gap: 10px;'>";

    for(var i = 0; i < JSONArray.length(); i++){
        var imageObj = JSONArray.get(i);
        var imageUrl = imageObj.getString("path");

        html += "<div style='border: 1px solid #ccc; padding: 5px;'>" +
                "<img src='" + imageUrl + "' " +
                "style='max-width: " + thumbnailWidth + "px; max-height: " + thumbnailHeight + "px; " +
                "width: auto; height: auto; display: block; cursor: pointer;' " +
                "onclick='window.open(\"" + imageUrl + "\", \"_blank\")'>" +
                "</div>";
    }

    html += "</div>";

    return html;
})();

示例9：图片加载失败处理

(function(){
    var imageUrl = "图片URL";
    var maxWidth = 500;
    var maxHeight = 400;
    var defaultImage = "默认图片URL";

    var html = "<img src='" + imageUrl + "' " +
               "style='max-width: " + maxWidth + "px; max-height: " + maxHeight + "px; " +
               "width: auto; height: auto;' " +
               "onerror='this.onerror=null; this.src=\"" + defaultImage + "\"'>";

    return html;
})();

示例10：图片自适应并保持比例

(function(){
    var imageUrl = "图片URL";
    var containerWidth = 500;
    var containerHeight = 400;

    var html = "<div style='width: " + containerWidth + "px; height: " + containerHeight + "px; " +
               "display: flex; align-items: center; justify-content: center; " +
               "border: 1px solid #ccc;'>" +
               "<img src='" + imageUrl + "' " +
               "style='max-width: 100%; max-height: 100%; " +
               "width: auto; height: auto; object-fit: contain;'>" +
               "</div>";

    return html;
})();

关键CSS属性说明

max-width 和 max-height

• max-width: 设置元素的最大宽度
• max-height: 设置元素的最大高度
• width: auto: 宽度自动，保持原始比例
• height: auto: 高度自动，保持原始比例

object-fit

• contain: 保持原始比例，完整显示图片
• cover: 保持原始比例，填充容器（可能裁剪）
• fill: 拉伸填充容器（可能变形）

display

• block: 块级元素，独占一行
• inline-block: 行内块元素，可以设置宽高
• flex: 弹性布局

注意事项

• ⚠️ 图片URL: 确保图片URL正确且可访问
• ⚠️ 宽高比例: 使用 width: auto; height: auto; 保持原始比例
• ⚠️ 容器大小: 设置合适的最大宽高，避免图片过大或过小
• ⚠️ 性能优化: 大量图片时考虑使用懒加载
• ⚠️ 错误处理: 添加 onerror 处理图片加载失败
• ⚠️ 响应式设计: 考虑不同屏幕尺寸的显示效果
• 使用 max-width 和 max-height 限制图片大小
• 使用 width: auto; height: auto; 保持原始比例
• 可以使用 object-fit: contain; 确保图片完整显示

使用场景

• 表单中展示图片
• 计算脚本中动态显示图片
• 图片列表展示
• 图片预览功能
• 响应式图片展示

---

如需查看完整脚本代码，请访问源文档链接。