我目前正在尝试通过笔记本电脑网络摄像头拍照并将其保存到 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>
最佳答案
This article covers taking a photo and saving it in APEX - 这与你正在做的事情非常相似。
与您的问题相关的主要部分是您的 JS“单击”事件监听器应将图像发送到服务器端 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 调用成功后提交页面。
您还需要在 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;
他们在文章中更详细地介绍了它。
关于javascript - 将 blob 从 JS 保存到 Oracle SQL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62656309/