将图像DataUrl转换为图像

Question

我想在我的java web application.Now中使用摄像头拍照，我正在使用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到斑点.Can它是否有助于使我的图像到特定的位置？

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中使用具有download属性的锚点元素下载文件，并在其上触发单击事件。在这种情况下，您可以将锚点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/