java - 将图像 DataUrl 转换为图像

Question

我想在我的 java web 应用程序中使用网络摄像头拍照。现在为了做到这一点，我使用 Photobooth.js，它提供了在 Web 应用程序中单击图像的工具。

现在我的问题是，一旦我单击按钮拍照，我想将其保存在我的计算机中，名称为 temp.png，位于指定文件夹(例如 C:/MyPictures)中。但是使用 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

您只是想触发图像的下载吗？您可以使用具有下载属性的 anchor 元素并在其上触发单击事件来下载 javascript 中的文件。在这种情况下，您可以将 anchor 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);

}

看这个 fiddle :

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