创建带自定义徽标的 Oracle APEX QR码插件

Source: Dev.to

在 Oracle APEX 生态系统中，二维码功能实际上已经有许多 Oracle Apex 插件可用。但像在二维码中心插入公司徽标以使其更专业、符合品牌的特定需求并不总能满足。大多数现有插件仅支持生成标准二维码，且没有图像自定义选项，因此我决定自行构建插件，以便在多个项目中重复使用，而无需在每个应用中重新编写 JavaScript 代码。

构建自定义插件的原因

• 徽标、尺寸和颜色 配置可以直接在 Page Designer 中设置。
• 支持高错误纠正级别，以便即使被徽标遮挡，二维码仍可被读取。
• 只需拖拽即可让其他开发者轻松使用。

技术实现与挑战

• 使用支持在 canvas 元素上渲染的 qr-code-styling 库。
• 在后端（PL/SQL）中，创建渲染函数，以桥接在 APEX Page Designer 中输入的属性到 JavaScript 的相应属性。

function f_render (
    p_logo_url   in varchar2,
    p_size       in number,
    p_color      in varchar2,
    p_bgcolor    in varchar2,
    p_ec_level   in varchar2
) return varchar2 is
begin
    -- Implementasi logika yang memanggil library JavaScript
    -- dan mengembalikan HTML/JS yang diperlukan.
    return '';
end;
/

在 Page Designer 中的实现

1. 创建 Page Item，类型为 Text Field，用于存放所需数据（例如 URL 或二维码文本）。
2. 创建按钮，用于触发二维码生成。
3. 在按钮上创建 Dynamic Action，动作为 Execute JavaScript Code，调用函数 f_render。
4. 选择 QR Code with logo 作为动作类型。
5. 添加 Sub Region，其内容为以下 HTML：

<!-- Tambahkan elemen canvas atau container di sini -->
<div id="qr-code-container"></div>

配置完成后，带徽标的二维码将显示在该区域内。

结论

Oracle APEX 的教程或文档在印尼语中仍然有限。希望这篇简短的文章能为想通过插件开发来扩展 APEX 功能的朋友们提供一些思路。

如果想查看代码细节或尝试此插件，请前往我的代码仓库。