时间戳

首页 > 解决方案 > 将 blob 从 JS 保存到 Oracle SQL？

javascript - 将 blob 从 JS 保存到 Oracle SQL？

问题描述

我目前正在尝试通过笔记本电脑的网络摄像头拍照并将其保存到 Oracle Apex 数据库。

为了捕捉用户照片，我使用简单的 JS 代码（见下文）。如何将我的图像保存到数据库？我认为将图像转换为 blob 是最简单的想法，但转换后我被卡住了……我可以用我的 Blob 设置“仅显示”或“上传文件”项吗？

非常感谢您的帮助！

<html>
Videoplayer will follow here
    <video id="player" autoplay></video>
    <button type="button" id="capture">Capture</button>
    <canvas id="canvas" class="canvasclass"></canvas>
    <button type="button" id="save">Save Photo</button>
    <div id="urldiv">URL here</div>
    <script>
    const player = document.getElementById('player');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');
    const savebutton = document.getElementById('save');
    const urlplace = document.getElementById('urldiv');
 
    const constraints = {
        audio:false,video:true
 
    };
 
    captureButton.addEventListener('click', () => {
        context.drawImage(player, 0, 0, canvas.width, canvas.height);
 
        // Stop all video streams.
        player.srcObject.getVideoTracks().forEach(track => track.stop());
    });
 
    navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => {
        // Attach the video stream to the video element and autoplay.
        player.srcObject = stream;
        });
 
    savebutton.addEventListener('click', () => {
        const dataurl = canvas.toDataURL();
        urlplace.innerHTML = dataurl;
        window.prompt("Copy to clipboard: Ctrl+C, Enter", dataurl);
       // $s("ITEM_NAME", dataurl); 
    })
 
    </script>
<html>

标签： javascriptoracleplsqloracle-apex

解决方案

本文介绍拍摄照片并将其保存在 APEX 中- 这与您正在执行的操作非常相似。

与您的问题相关的主要部分是您的 JS 'click' 事件侦听器应将图像发送到服务器端 ajax 进程。这里它被命名为“SAVE_PHOTO”：

apex.server.process(
  'SAVE_PHOTO',
  {
    p_clob_01: canvas.toDataURL().match(/,(.*)$/)[1] 
  },
  {
    success: function(data) {
               if (data.result == 'success') {
                 apex.submit('SNAP_PHOTO');
               }
             }
  }
);

请注意，它还会在 ajax 调用成功后提交页面。

SAVE_PHOTO您还需要在 Apex中创建按需流程：

declare
  l_photo_clob clob;
  l_photo_blob blob;
begin
  l_photo_clob := apex_application.g_clob_01;
 
  l_photo_blob := apex_web_service.clobbase642blob(
                    p_clob => l_photo_clob
                  );
 
  -- Here, instead of adding the blob to a collection, you could insert it in a table.
  -- If so, you probably want to pass more arguments (e.g. primary key) using apex_application.G_X01 , g_x02, etc
  apex_collection.add_member(
    p_collection_name => 'PHOTOS',
    p_blob001 => l_photo_blob
  );
 
  apex_json.open_object;
  apex_json.write(
    p_name => 'result',
    p_value => 'success'
  );
  apex_json.close_object;
exception
  when others then
    apex_json.open_object;
    apex_json.write(
      p_name => 'result',
      p_value => 'fail'
    );
    apex_json.close_object;
end;

他们在文章中更详细地介绍了它。

推荐阅读