如何使用JavaScript将data:image/png:base64 ...解码为真实图像 [英] How to decode data:image/png:base64... to a real image using javascript

问题描述

我已经使用HTML5从网络摄像头捕获了图像，但是结果以base64编码.如何解码并在文件上传中放置真实图像. 这是我的代码

I have captured the image from webcam using HTML5 but the result is encoded in base64. How can I decode and put a real image on file upload. Here is my code

HTML

<div class="fileUpload">
    <input type="file" accept="image/*" class="CUupload" onClick="return false">
</div>
<div class="CUpopup" style="display:none">
    <div id="CUmain">
        <video id="video"></video>
        <div class="CUvideoside">
            <a id="button">Camera button</a>
            <!-- target for the canvas-->
            <div id="canvasHolder"></div>
            <!--preview image captured from canvas-->
            <img id="preview" src="" width="160" height="120">
            <label>base64 image:</label>
              <!--<input id="imageToForm" type="text">-->
            <div class="CUdone">
                <a href="javascript:void(0);">Done</a>
            </div>
        </div>
    </div>
</div>

CSS

 body{
    font-family:Sans-Serif;
}
canvas{
    position:absolute; 
    left: -9999em;
}
#button{
    background-color: Red; 
    color: #fff; 
    padding: 3px 10px; 
    cursor:pointer; 
    display: inline-block; 
    border-radius: 5px;
}
#sidebar{
    float:right; 
    width: 45%;
}
#main{
    float:left; 
    width: 45%;
}
#imageToForm{
    width:100%;
}
#preview{
    margin: 20px 0;
}
label{
    display: block;
}
video#video{
    width:50%;
    float:left;
    height:100%;
}
.CUpopup{
    position:fixed;
    top:0px;
    left:0px; 
    bottom:0px;
    right:0px; 
    background:rgba(0,0,0,0.3);
}
#CUmain{position:absolute;
    top:0px;
    left:0px; 
    bottom:0px;
    right:0px;
    margin:auto;
    background:#fff;
    width:50%;
    height:50%;
    padding:10px;
    border-radius:10px;
}
.CUvideoside{
    width:48%;
    float:left;
    margin-left:2%;
}
.CUdone a{
    background-color: Red; 
    color: #fff; 
    padding: 3px 10px; 
    cursor:pointer; 
    display: inline-block; 
    border-radius: 5px;
    text-decoration:none;
}


**JS**


$(document).ready(function(){
    $('.CUupload').click(function(){
        $('.CUpopup').show();
    });
    $('.CUdone').click(function(){
        if($('preview').attr('src') != ""){
             $('.CUpopup').hide();
        }
    });

});
        var video;
        var dataURL;

        //http://coderthoughts.blogspot.co.uk/2013/03/html5-video-fun.html - thanks :)
        function setup() {
            navigator.myGetMedia = (navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);
            navigator.myGetMedia({ video: true }, connect, error);
        }

        function connect(stream) {
            video = document.getElementById("video");
            video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
            video.play();
        }

        function error(e) { console.log(e); }

        addEventListener("load", setup);

        function captureImage() {
            var canvas = document.createElement('canvas');
            canvas.id = 'hiddenCanvas';
            //add canvas to the body element
            document.body.appendChild(canvas);
            //add canvas to #canvasHolder
            document.getElementById('canvasHolder').appendChild(canvas);
            var ctx = canvas.getContext('2d');
            canvas.width = video.videoWidth / 4;
            canvas.height = video.videoHeight / 4;
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            //save canvas image as data url
            dataURL = canvas.toDataURL();
            //set preview image src to dataURL
            document.getElementById('preview').src = dataURL;
            // place the image value in the text box
           // document.getElementById('imageToForm').value = dataURL;
            $('.CUupload').attr('value',dataURL);
        }

        //Bind a click to a button to capture an image from the video stream
        var el = document.getElementById("button");
        el.addEventListener("click", captureImage, false);

我想使用文件上传功能上传网络摄像头捕获的图像

I want to upload a image captured by webcam using file upload

推荐答案

将base64字符串转换为blob.使用文件上传器的文件是具有额外属性的Blob，因此上传Blob的原理相同.

Convert the base64 string to a blob. A file using a file uploader is a blob with extra properties, so uploading a blob works the same.

var file = dataURItoBlob(canString, 'image/png');


function dataURItoBlob(dataURI, type) {
    // convert base64 to raw binary data held in a string
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var bb = new Blob([ab], { type: type });
    return bb;
}

更新

要将base64字符串转换为图像:

To convert a base64 string to an image:

var image = new Image(),
    containerWidth = null,
    containerHeight = null;

image.onload=function(){
    containerWidth = image.width;
    containerHeight = image.height;
}
image.src = base64string;

或者将base64字符串另存为一个文件(当我找到它的实现位置时，这不在内存中):

Or to save the base64 string locally as a file (this one is off memory while I locate where I implemented it):

    function saveImage(base64string) {
        var imageData = base64string.split(',')[1];
        var a = $("<a>").attr("href", "data:Application/base64," + imageData )
                        .attr("download","image.png")
                        .appendTo("body");

            a[0].click();

        a.remove();
    }

这篇关于如何使用JavaScript将data:image/png:base64 ...解码为真实图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！