个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
目前我正在开发一个开放的网络应用程序相机，现在我已经实现了相机设置(实时流作为视口(viewport)，拍照按钮，捕捉，在 Angular 落显示拍照......等等)但现在我遇到了如何将用户的图片保存到他们的设备或计算机的问题，这个应用程序目前主要是为移动 b2g 设计的。我知道大多数人都会告诉我安全问题!!!我不是说告诉设备确切地把它放在哪里。我的意思是像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function () {
var img = document.getElementById('embedImage');
var button = document.getElementById('saveImage');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
'9TXL0Y4OHwAAAABJRU5ErkJggg==';
img.onload = function () {
button.removeAttribute('disabled');
};
button.onclick = function () {
window.location.href = img.src.replace('image/png', 'image/octet-stream');
};
};
</script>
</head>
<body>
<img id="embedImage" alt="Red dot"/>
<input id="saveImage" type="button" value="save image" disabled="disabled"/>
</body>
</html>
在移动设备上执行的特定代码会触发文件在单击按钮时自动保存。现在我想做的是使用它从它的 var 中拍摄我的照片并将其保存为该文件，例如将在下载文件夹中。这就是我目前的代码 https://github.com/1Jamie/1Jamie.github.io
任何帮助将不胜感激，如果您想看看工作情况，这是当前正在运行的实现 http://1Jamie.github.io
最佳答案
当我玩 getUserMedia 时，这对我有用 - 我确实注意到你没有正确大小写的方法名称，它是 navigator.mediaDevices 接口(interface)的方法 - 而不是窗口的方法直接……
引用资料:
[mozilla 导航器] https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Navigator
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices
[chrome 和 android 的媒体设备] https://developers.google.com/web/updates/2015/10/media-devices?hl=en
var video = document.getElementById('monitor');
var canvas1 = document.getElementById('photo1');
var img1 = document.getElementById('canvasImg');
navigator.mediaDevices.getUserMedia({
video: true
}).then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function () {
canvas1.width = video.videoWidth;
canvas1.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}).catch(function (reason) {
document.getElementById('errorMessage').textContent = 'No camera available.';
});
function snapshot1() {
canvas1.getContext('2d').drawImage(video, 0, 0);
}
“save_snap”是按钮的 ID - 免责声明我使用的是 jQuery - 但你应该很容易看到它与你的代码对应的位置:
$("#save_snap").click(function (event){
// save canvas image as data url (png format by default)
var dataURL = canvas2.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
$('#canvasImg').attr("src" , dataURL);
$('#downloader').attr("download" , "download.png");
$('#downloader').attr("href" , dataURL);
//* trying to force download - jQuery trigger does not apply
//Use CustomEvent Vanilla js: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
// In particular
var event1 = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
//NOW we are effectively clicking the element with the href attribute:
//Could use jQuery selector but then we would have to unwrap it
// to expose it to the native js function...
document.getElementById('downloader').dispatchEvent(event1);
});
关于javascript - 如何在js中保存用window.getusermedia拍摄的照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38733513/
25
4
0
我的一个页面上有一个 map 控件，我希望拍摄它的照片并将其显示在不同的屏幕上。有谁知道我怎样才能实现这一目标？该 map 位于 范围内. 最佳答案 您应该使用 WriteableBitmap 类的
我正在使用 Qt 4.5 和 qgraphicsscene/view 向用户显示视频。 我想提供一个“获取快照”按钮，我相信有一种非常简单的方法可以让我想到的一切都简单得多。 我怎样才能优雅地做到这一
使用以下代码拍摄 AGSMapView 的快照 此代码将设置 kEAGLDrawablePropertyRetainedBacking 属性，这是必需的，否则它将拍摄白色快照。 let layer =
我目前正在使用 direct X 用 c++ 编写游戏，目前有一个 vector 来存储绘制我所有的 Sprite 。我无法让子弹在 vector 中工作。子弹射了，但应该有 50 颗却只射出一颗 /
如何获取安卓手机的打印屏幕？？我正在用 GPS 做一个应用程序。所以我无法使用模拟器拍摄打印照片。有没有应用程序可以做到这一点？ 最佳答案 通过 USB 连接您的手机，转到 Eclipse 中的调试透
我有以下 JSON Firebase 数据库: { "fruits": { "apple": { "name": "Gala", "ur
我正在做一个项目，它应该获取 iPhone 中视频图标内的视频。任何人都可以通过提供链接或其他方式来帮助我吗？如有任何帮助，我们将不胜感激。 谢谢 最佳答案 这是不可能的，因为我们无法从一个应用程序内
如何链接到嵌入 Flash 视频的快照而不是实际的 Flash 视频，以减少网站的加载时间？ 最佳答案 是的，事实上这是一种经常使用的方法。您从带有播放按钮覆盖层的图像开始。单击后，图像元素将替换为播
我正在用这个截取 avPlayer 的屏幕截图.. print(startTime) print(Float64(startTime)) var time: CMTime =
我试图从 nib 加载一个 View ，配置它，并拍摄它的快照，而不是将它添加到屏幕上: + (void)composeFromNibWithImage:(UIImage*)catImage comp
我正在制作一个 tvOS 应用程序，我希望它看起来与电影应用程序相似。因此我有一个 UICollectionView。现在我的单元格不仅仅是简单的 UIImageView，而是更复杂一些。 我仍然想要
Apple 建议从提交给应用商店的屏幕截图中裁剪掉状态栏。在预览版中手动执行此操作非常繁琐且容易出错。 是否有任何开发人员有任何最佳实践建议或自动化技术来加速此过程？目标是将 iPad 和/或 iPh
我所有的搜索都涉及更一般的 arc/sin/cos 用法或射击到鼠标位置。我希望用键盘瞄准并发射射弹，并且作为网络类(class)中的菜鸟做一个项目，我已经从头开始做了很多工作，但我陷入了困境。我当前
假设我有一个服务: public interface ICustomersService { IObservable Customers { get; } }
在我的 IOS 应用程序中，我正在截取 UIImageView 的屏幕截图。如附件照片所示，它非常完美。但是在这里，我采用了 UIImageView content mode aspect fit 。
我正在使用 WebRTC 在两个用户之间建立视频聊天。我想拍一张显示其中一个人的 localView View 。 这是我的类，它使用 configureLocalPreview 方法将视频流与 UI
EBS 文档指出: As an example, volumes that operate with 20 GB or less of modified data since their most r
import qualified Data.Vector as V import Control.Lens import Data.Vector.Lens v = V.fromList [V.from
我在我的应用程序中的“查看”按钮中有一个用于使用以下代码拍摄快照的按钮 open func takeScreenshot(_ shouldSave: Bool = true) -> UIImage?
我基本上是在尝试在我的 Activity 中捕获相对布局的屏幕截图并将其保存为 PNG 图像。然后我需要将它作为位图文件检索。我编写了一些代码来完成此操作，但遗憾的是屏幕截图未保存在我的设备上。 XM
我是一名优秀的程序员,十分优秀！