Question

我想在我的java web应用程序中使用网络摄像头拍照。现在我正在使用Photobooth.js，它提供了点击Web应用程序中图像的功能。

现在我的问题是，只要我点击按钮拍照，我就想把它保存在我的电脑里，名字叫temp.png在指定的文件夹中说C：/MyPictures.But图片被点击使用photobooth .js提供了以下形式的dataUrl：

data:image/png;base64,iVBORw0KGgoAAAANSU and so on a long string.

我现在如何将图像传送到指定位置？

我使用photobooth并显示点击图片的代码如下：

<script type="text/javascript">
        $(document).ready(function () {
        $('#photo').photobooth().on("image", function (event, dataUrl) {
        alert(dataUrl);

        $("#gallery").show().html('<img src="' + dataUrl + '" >');
        });
 });
 </script>

在html部分：

<div id="photo"></div>
<div id="gallery"></div>

这是使用的.js文件：

https://github.com/WolframHempel/photobooth-js/blob/gh-pages/photobooth_min.js

我有这个代码将dataURL转换为blob。可以帮助我将图像转换到特定位置吗？

function dataURLtoBlob(dataUrl) {
        // Decode the dataURL    
        var binary = atob(dataUrl.split(',')[1]);

        // Create 8-bit unsigned array
        var array = [];
        for (var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }

        // Return our Blob object
        return new Blob([new Uint8Array(array)], {
        type: 'image/png'
    });
}

Answer 1

您是否只是想触发下载图片？您可以使用带有下载属性的锚元素在javascript中下载文件并在其上触发单击事件。在这种情况下，您可以将锚点href设置为图像的dataURL。

function download(dataUrl, filename) {
    var download = document.createElement('a');
    download.href = dataUrl;
    download.target = '_blank';
    download.download = filename;
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,
                       false, false, false, false, 0, null);
    download.dispatchEvent(evt);

}

看到这个小提琴：

http://jsfiddle.net/edAAe/1/

将Image DataUrl转换为Image

1 个答案: