конвертировать base64 для изображения в JavaScript/JQuery

Question

Я написал код для захвата изображения с помощью 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 печати формат base64, Как преобразовать эту base64 в образ и как использовать этот путь в javascript clientside.

В поисках google так много веб-сайтов, но не работает, и этот код не подходит для моего требования.

Answer 1

Вы можете просто создать Image объект и поместить base64 в качестве своего src, в том числе data:image... части like this:

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

Это то, что они называют «Data URI,» и вот the compatibility table для внутреннего мира.

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

Один быстрый и простой способ:

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

Это не совсем сценарии OP, но ответ на те из некоторых комментаторов. Это решение, основанное на Cordova и Angular 1, которое должно быть адаптировано к другим фреймворкам, таким как jQuery. Он дает вам Blob из данных Base64, которые вы можете хранить где-нибудь и ссылаться на него с клиентской стороны 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, Blob и atob.

Вот код, чтобы записать файл на локальном хранилище устройства с Кордова/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); 
     }); 
    }) 
} 

Я использую последнюю Кордову (6.5.0) и плагины версии:

Надеюсь, что все здесь будут в правильном направлении.