Javascript 将blob从JS保存到Oracle SQL？_Javascript_Oracle_Plsql_Oracle Apex

Javascript 将blob从JS保存到Oracle SQL？

javascript oracle plsql oracle-apex

Javascript 将blob从JS保存到Oracle SQL？,javascript,oracle,plsql,oracle-apex,Javascript,Oracle,Plsql,Oracle Apex,我目前正试图通过笔记本电脑网络摄像头拍摄照片，并将其保存到Oracle Apex数据库中为了捕捉用户的照片，我使用了简单的JS代码（见下文）。如何将图像保存到数据库？我认为将图像转换为水滴是最简单的想法，但转换后我被卡住了。。。我可以用Blob设置“仅显示”或“上载文件”项目吗非常感谢你的帮助 <html> Videoplayer will follow here <video id="player" autoplay></video

我目前正试图通过笔记本电脑网络摄像头拍摄照片，并将其保存到Oracle Apex数据库中

为了捕捉用户的照片，我使用了简单的JS代码（见下文）。如何将图像保存到数据库？我认为将图像转换为水滴是最简单的想法，但转换后我被卡住了。。。我可以用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>


视频播放器将跟随这里
俘获
保存照片
此处的URL
常量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'）；
常量约束={
音频：错误，视频：正确
};
captureButton.addEventListener（'单击'，（）=>{
drawImage（播放器，0，0，canvas.width，canvas.height）；
//停止所有视频流。
player.srcObject.getVideoTracks（）.forEach（track=>track.stop（））；
});
navigator.mediaDevices.getUserMedia（约束）
。然后（（流）=>{
//将视频流附加到视频元素并自动播放。
player.srcObject=流；
});
savebutton.addEventListener（'单击'，（）=>{
const dataurl=canvas.toDataURL（）；
urlplace.innerHTML=数据URL；
提示（“复制到剪贴板：Ctrl+C，输入”，dataurl）；
//$s（“项目名称”，数据URL）；
})

-这与您所做的非常相似

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

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

您还需要在Apex中创建随需应变流程

SAVE_PHOTO

：

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;

他们在文章中对其进行了更详细的介绍。

我不建议将映像保存到数据库中，这太耗费资源了，更好的办法是将映像放在文件系统中，并将其路径插入数据库中。不幸的是，目前还没有选择。肯定是更好的答案

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;