convert base64 zu Bild in Javascript/jquery

Question

ich einige Codes für Bild geschrieben habe, die Erfassung mit Hilfe von Javascript/jquery Im Folgenden ist der Code:

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); 
} 

Die item_image das base64-Format drucken, , wie das base64 konvertieren Bild und wie man diesen Pfad in Javascript clientside verwendet.

Ich suche Google so viele Websites, aber es funktioniert nicht und dieser Code ist nicht für meine Anforderung geeignet.

Answer 1

können Sie nur ein Image Objekt erstellen und die base64 als src setzen, einschließlich der data:image... Teil like this:

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

Es ist, was sie „Data-URIs“ nennen, und hier ist the compatibility table für den inneren Frieden.

Answer 2

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 

Answer 3

Eine schnelle und einfache Art und Weise:

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); 

} 

Answer 4

Html

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

Js

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

Answer 5

Dies ist nicht genau das Szenario des OP aber eine Antwort auf die von einigen der Kommentatoren. Es ist eine Lösung basierend auf Cordova und Angular 1, die an andere Frameworks wie jQuery angepasst werden kann. Es gibt Ihnen einen Blob aus Base64-Daten, die Sie irgendwo speichern können und verweisen Sie von Client-Seite Javascript/HTML.

Es beantwortet auch die ursprüngliche Frage auf, wie ein Bild (Datei) von der Base 64 Daten zu erhalten:

Der wichtige Teil ist die Base 64 - Binär-Konvertierung:

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 }); 
} 

Slicing erforderlich ist um Fehler zu vermeiden.

Funktioniert mit JPG und PDF-Dateien (zumindest was ich getestet habe). Sollte auch mit anderen mimetypes/contenttypes funktionieren. Überprüfen Sie die Browser und deren Versionen, nach denen Sie suchen, sie müssen Uint8Array, Blob und atob unterstützen.

Hier ist der Code, um die Datei an das Gerät des lokalen Speicher mit Cordova/Android zu schreiben:

... 
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); 
       }); 
... 

die Datei selbst schreiben:

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); 
     }); 
    }) 
} 

ich die neueste Cordova bin mit (6.5.0) und Plugins Versionen:

Ich hoffe, dass dies alle hier in die richtige Richtung führt.