javascript/jquery에서 base64를 이미지로 변환

javascript/jquery에서 base64를 이미지로 변환

javascript/jquery를 이용한 이미지 캡쳐를 위한 코드를 작성하였습니다. 아래 코드는 다음과 같습니다.

function capture_image(){ 
    alert("capture_image");
    var p = webcam.capture();
    webcam.save();           
    alert("capture complete "+p); //getting true here


     var img = canvas.toDataURL("image");
    var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ; 
    alert("item_image"+item_image);
}

item_image는 베이스64 형식인 베이스64를 이미지로 변환하는 방법과 자바스크립트 클라이언트 사이드에서 해당 경로를 사용하는 방법을 인쇄합니다.

구글에서 너무 많은 웹사이트를 검색하고 있는데 작동이 안 되고 그 코드는 제 요구사항에 맞지 않습니다.

당신은 그냥 당신이 원하는 것을Image오브젝트와 베이스64를 그대로 둡니다.src, 포함하여data:image...부품은 다음과 같은 부품:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

그것은 그들이 "Data URIs"라고 부르는 것이고 여기 내부 평화에 대한 호환성 표가 있습니다.

html

<img id="imgElem"></img>

Js

string baseStr64="/9j/4AAQSkZJRgABAQE...";
imgElem.setAttribute('src', "data:image/jpg;base64," + baseStr64);

이것은 OP의 시나리오가 아니라 일부 논평가들의 시나리오에 대한 답입니다.코르도바와 앵귤러 1을 기반으로 한 솔루션으로, jQuery와 같은 다른 프레임워크에 적용 가능해야 합니다.Base64의 Blob from Base64 data를 제공하여 어디에 저장하고 클라이언트측 javascript / html에서 참조할 수 있습니다.

또한 Base 64 데이터에서 이미지(파일)를 가져오는 방법에 대한 원래 질문에 답합니다.

중요한 부분은 Base 64 - Binary 변환입니다.

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

메모리 오류를 방지하려면 슬라이싱이 필요합니다.

jpg 및 pdf 파일로 작동합니다(적어도 제가 테스트한 내용입니다).다른 밈 유형/컨텐츠 유형에서도 작업해야 합니다.원하는 브라우저와 버전을 확인해 보십시오. Uint8Array, Blobbandatob을 지원해야 합니다.

다음은 Cordova / Android를 사용하여 장치의 로컬 스토리지에 파일을 쓰는 코드입니다.

...
window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {

                    // Setup filename and assume a jpg file
                    var filename = attachment.id + "-" + (attachment.fileName ? attachment.fileName : 'image') + "." + (attachment.fileType ? attachment.fileType : "jpg");
                    dirEntry.getFile(filename, { create: true, exclusive: false }, function(fileEntry) {
                        // attachment.document holds the base 64 data at this moment
                        var binary = base64toBlob(attachment.document, attachment.mimetype);
                        writeFile(fileEntry, binary).then(function() {
                            // Store file url for later reference, base 64 data is no longer required
                            attachment.document = fileEntry.nativeURL;

                        }, function(error) {
                            WL.Logger.error("Error writing local file: " + error);
                            reject(error.code);
                        });

                    }, function(errorCreateFile) {
                        WL.Logger.error("Error creating local file: " + JSON.stringify(errorCreateFile));
                        reject(errorCreateFile.code);
                    });

                }, function(errorCreateFS) {
                    WL.Logger.error("Error getting filesystem: " + errorCreateFS);
                    reject(errorCreateFS.code);
                });
...

파일 자체 쓰기:

function writeFile(fileEntry, dataObj) {
    return $q(function(resolve, reject) {
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function(fileWriter) {

            fileWriter.onwriteend = function() {
                WL.Logger.debug(LOG_PREFIX + "Successful file write...");
                resolve();
            };

            fileWriter.onerror = function(e) {
                WL.Logger.error(LOG_PREFIX + "Failed file write: " + e.toString());
                reject(e);
            };

            // If data object is not passed in,
            // create a new Blob instead.
            if (!dataObj) {
                dataObj = new Blob(['missing data'], { type: 'text/plain' });
            }

            fileWriter.write(dataObj);
        });
    })
}

최신 Cordova(6.5.0) 및 Plugins 버전을 사용하고 있습니다.

여기 계신 모든 분들에게 올바른 방향으로 다가갔으면 좋겠습니다.

@Joseph의 답변을 토대로 이 내용을 추가해야 합니다.이미지 개체를 만들려는 경우:

var image = new Image();
image.onload = function(){
   console.log(image.width); // image is loaded and we have image width 
}
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

var src = "data:image/jpeg;base64,";
src += item_image;
var newImage = document.createElement('img');
newImage.src = src;
newImage.width = newImage.height = "80";
document.querySelector('#imageContainer').innerHTML = newImage.outerHTML;//where to insert your image

빠르고 쉬운 한 가지 방법:

function paintSvgToCanvas(uSvg, uCanvas) {

    var pbx = document.createElement('img');

    pbx.style.width  = uSvg.style.width;
    pbx.style.height = uSvg.style.height;

    pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML);
    uCanvas.getContext('2d').drawImage(pbx, 0, 0);

}

다음과 같은 해결책이 나왔습니다. (모든 브라우저에서 테스트를 해본 적이 없습니다.

    // first convert to blob
    const dataToBlob = async (imageData) => {
      return await (await fetch(imageData)).blob();
    };
    
    const blob = await dataToBlob(destination.value);
    
    // then create URL object
    const url = URL.createObjectURL(blob);

누군가에게 도움이 되길 바랍니다:)

영감 소스:

자바스크립트에서 Base64 문자열로 BLOB 만들기

https://blog.logrocket.com/cropping-images-in-the-browser-with-vue-js/

언급URL : https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery