当前位置：首页 > article >正文

【Oracle APEX开发小技巧 8 】图片回显及多图片URL在页面回显点击放大

article 2024/9/20 19:54:36

用户在现场使用应用小程序拍照上传，存储的是图片的URL,那么如何将图片在APEX端回显呢？多图片URL在页面回显点击放大又是如何实现的呢？接下来请随我一探究竟

要实现上面的效果用到了图片拼接和遮罩层，具体操作：

图片拼接：

加载页初始化-创建动态操作-执行服务器端代码-PL/SQL-拼接图片并存储到页项中去

拼接URL,设置图片固定大小

代码：

DECLARE
    V_COUNT      NUMBER(20); --记录状态
    V_IMAGES_URL CLOB; --拼接图片
    V_ERR_MSG    NVARCHAR2(1000); --记录异常
    /**
     * CREATE BY: WXX
     * CREATE DATE: 2024/8/20 10:11
     * MODIFY BY:WXX    拼接图片  (多张)
     * MODIFY DATE:2024/8/26 19:11
     * DESCRIBE: P305拼接图片
     */
BEGIN
    --拼接图片
    V_IMAGES_URL := '<FIGURE CLASS="IMAGE">';
    FOR TIME IN ( SELECT IMAGES
                  FROM CHECK_CHANGE_RECORD
                  WHERE RECORD_ID = :P305_RECORD_ID
                    AND TENANT_ID = :USERTENANT
                    AND BASE_DEPT_ID = :BASE_DEPT_ID
        )
        LOOP
            FOR image_url IN (SELECT REGEXP_SUBSTR(TIME.IMAGES, '[^,]+', 1, LEVEL) AS IMAGE_URL
                              FROM DUAL
                              CONNECT BY LEVEL <= LENGTH(REGEXP_REPLACE(TIME.IMAGES, '[^,]+')) + 1)
                LOOP
                    V_IMAGES_URL := V_IMAGES_URL || '<IMG SRC="' || image_url.IMAGE_URL || '" style="width:100px; height:100px;" >';
                END LOOP;
        END LOOP;
    V_IMAGES_URL := V_IMAGES_URL || '</FIGURE>';
    APEX_UTIL.SET_SESSION_STATE('P305_IMAGES', V_IMAGES_URL);
EXCEPTION
    WHEN OTHERS THEN
        ROLLBACK;
        V_COUNT := -1;
        V_ERR_MSG := SQLERRM || CHR(13) || DBMS_UTILITY.FORMAT_ERROR_BACKTRACE;
        JA_WRITE_LOG(:APP_PAGE_ALIAS || ':' || :APP_PAGE_ID || ':拼接图片', 'ERROR', V_ERR_MSG, :USER_ID,
                     :USERTENANT, :APP_NAME || ':' || :APP_ID);
END;


-- DECLARE
--     V_COUNT      NUMBER(20); --记录状态
--     V_IMAGES_URL CLOB; --拼接图片
--     V_ERR_MSG    NVARCHAR2(1000); --记录异常
--     /**
--      * CREATE BY: WXX
--      * CREATE DATE: 2024/8/20 10:11
--      * MODIFY BY:
--      * MODIFY DATE:
--      * DESCRIBE: P305拼接图片
--      */
-- BEGIN
--     --拼接图片
--     V_IMAGES_URL := '<FIGURE CLASS="IMAGE">';
--     FOR TIME IN ( SELECT IMAGES
--                   FROM CHECK_CHANGE_RECORD
--                   WHERE RECORD_ID = :P305_RECORD_ID
--                     AND TENANT_ID = :USERTENANT
--                     AND BASE_DEPT_ID = :BASE_DEPT_ID
--         )
--         LOOP

--             V_IMAGES_URL := V_IMAGES_URL || '<IMG SRC="' || TIME.IMAGES || '">';
--         END LOOP;
--     V_IMAGES_URL := V_IMAGES_URL || '</FIGURE>';
--     APEX_UTIL.SET_SESSION_STATE('P305_IMAGES', V_IMAGES_URL);
-- EXCEPTION
--     WHEN OTHERS THEN
--         ROLLBACK;
--         V_COUNT := -1;
--         V_ERR_MSG := SQLERRM || CHR(13) || DBMS_UTILITY.FORMAT_ERROR_BACKTRACE;
--         JA_WRITE_LOG(:APP_PAGE_ALIAS || ':' || :APP_PAGE_ID || ':拼接图片', 'ERROR', V_ERR_MSG, :USER_ID,
--                      :USERTENANT, :APP_NAME || ':' || :APP_ID);
-- END;

说明：

1. 首先，将V_IMAGES_URL初始化为包含一个HTML标签`<FIGURE CLASS="IMAGE">`的字符串。

2. 使用FOR循环从CHECK_CHANGE_RECORD表中查询满足特定条件（RECORD_ID、TENANT_ID和BASE_DEPT_ID）的记录，并将结果存储在TIME变量中。

3. 对于每个TIME记录，再次使用FOR循环来处理IMAGES字段中的多个图片URL。这里使用了Oracle的正则表达式函数REGEXP_SUBSTR来分割IMAGES字段中的逗号分隔的图片URL。

4. 在内层循环中，将每个图片URL拼接到V_IMAGES_URL变量中，并在每个图片URL前添加一个`<IMG>`标签，设置图片的宽度、高度和边距样式。

5. 在所有图片URL都拼接完成后，将`</FIGURE>`标签添加到V_IMAGES_URL的末尾，完成整个图片列表的拼接。

6. 使用APEX_UTIL.SET_SESSION_STATE函数将拼接好的图片列表存储到会话状态中，项名为'P305_IMAGES'。

7. 异常处理部分：如果在执行过程中发生任何异常，将回滚事务，将V_COUNT设置为-1，并将错误信息存储在V_ERR_MSG变量中。然后调用JA_WRITE_LOG函数记录错误日志。

这段代码的主要功能是从数据库中获取一组图片URL，将它们拼接成一个HTML格式的图片列表，并将结果存储到会话状态中供后续使用。

遮罩层的设置：

页-CSS-文件URL（一定要记得导入对应CSS文件#WORKSPACE_FILES#static/layui-v2.6.13/layui/css/layui.css）

设置固定图片大小，否则

对应CSS内嵌：
页-CSS-引入对应CSS文件URL-内嵌

代码如下

img{
    width: 90%;
    /* height: 50%; */
}

/*点击上传的文件（图片全屏放大）start*/
.bigImg {
    position: absolute;
    top: 50%;
    left: 50%;
    /*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/
    transform: translate(-50%,-50%);
}
/*遮罩层*/
.opacityBottom {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    top: 0;
    left: 0;
}

统一图片大小后的效果展示：