在没有JQuery的数据库中存储图像
Storing Image In Database Without JQuery
大家好,
我正在做一个网络项目,在这个项目中,我们重新创建了一个类似snapchat的社交媒体网站。我正在使用我的网络摄像头使用JS拍照,我正在将图片写入一个名为img的变量,如下所示:
var img = canvas.toDataURL("image/png");
我们需要使用PDO在PHP访问数据库。另外,我们可以使用AJAX,但JQuery是严格禁止的。我的问题是,如何将DataURL存储在数据库中?所有在线教程都使用JQuery。
更新:我按照下面建议的步骤操作,但是当我按下快照按钮时,它仍然只拍摄照片,但没有URL或什么都没有。
function sendimagetourl(image)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
alert( this.resoponseText);
}
}
xhtp.open("GET", "saveimage.php?url="+image, true);
xhttp.send();
}
//Stream Video
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
//Snap Photo
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);var image = canvas.toDataURL("image/png"); sendimagetourl(image);});
看来我有点傻。有两个小错别字,似乎发送的数据在url中是不可见的。谢谢你的帮助!
可以使用javascript ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert( this.responseText);
}
};
xhttp.open("GET", "saveimage.php?url="+url, true);
xhttp.send();
可以使用XMLHttpRequest()
或fetch()
, Blob
, FormData
~ POST
data URI
~ php
。参见使用web应用程序中的文件
var request = new XMLHttpRequest();
request.open("POST", "/path/to/server", true);
request.onload = function() {
// do stuff
}
var data = new FormData();
data.append("image", new Blob([img], {type:"image/png"}), "filename");
request.send(data);
相关文章:
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 在字符串中查找所有图像 src URL 并存储在数组中
- 在ListView中添加JSON数组中存储的图像-ReactNative
- 以HTML文件中的编码形式脱机存储图像
- Codeigniter:通过Ajax上传图像并存储在数据库中
- 存储和检索图像数据URL
- 将图像文件存储在猫鼬模式中的二进制数据中,并以html形式显示图像
- 将图像标题存储在selenium IDE中
- Pinterest 扩展如何存储(临时)网页中的图像,然后在 iframe 中访问它们
- 在 Windows 现代(地铁)UI 应用中存储图像文件和音频文件的方法是什么?
- 有没有一种存储图像变量的短方法
- 如何正确存储图像的描述信息
- 如何使用Backand和Ionic存储图像
- 有可能阻止Cordova's相机插件,用于在设备上存储图像
- 在网络应用程序上存储图像的最佳方式是什么
- 存储图像点击并回显链接
- 在没有JQuery的数据库中存储图像
- Pdf.js查看器不正确地存储图像数据
- 使用node.js存储图像会产生错误
- 如何在HBASE中插入图片?我需要在hbase中存储图像(hbase是我项目中的DB)