在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打印base64格式，如何将base64转换为图像以及如何在javascript客户端中使用该path。
我search谷歌这么多的网站，但它不工作，该代码是不适合我的要求。
您可以创build一个Image对象，并将base64作为其src ，包括data:image...部分， 如下所示 ：
var image = new Image(); image.src = 'data:image/png;base64,iVBORw0K...'; document.body.appendChild(image);
这就是他们所说的“数据URI”，这里是内心平静的兼容性表格 。
这不完全是OP的情况，而是一些评论者的答案。 这是一个基于Cordova和Angular 1的解决scheme，它应该适用于其他框架，比如jQuery。 它给你一个Base64数据的Blob，你可以存储在某个地方，并从客户端javascript / html引用它。
它还回答了如何从Base 64数据获取图像（文件）的原始问题：
重要的部分是基础64 – 二进制转换：
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文件（至less这是我testing）。 还应该与其他mimetypes / contenttypes一起工作。 检查浏览器及其目标版本，他们需要支持Uint8Array，Blob和atob。
以下是使用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）和插件版本：
我希望这使大家都朝着正确的方向前进。
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); }
HTML
<img id="imgElem"></img>
JS
string baseStr64="/9j/4AAQSkZJRgABAQE..."; imgElem.setAttribute('src', "data:image/jpg;base64," + baseStr64);
