在 javascript/jquery 中将 base64转换为 image

我用 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格式, How to convert that base64 to image and how to use that path in javascript clientside.

我搜索谷歌这么多的网站，但它不工作，该代码是不适合我的要求。

396031 次浏览
小开

您只需创建一个 Image对象，并将 base64作为它的 src，包括 data:image...部分 像这样:

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

It's what they call "Data URIs" and here's the compatibility table for inner peace.

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

这并不完全是 OP 的场景，而是对一些评论者的回答。它是一个基于 Cordova 和 Angular 1的解决方案，应该可以适用于其他框架，比如 jQuery。它提供了一个来自 Base64数据的 Blob，您可以将它存储在某个地方，并从客户端 javascript/html 引用它。

它还回答了关于如何从 Base 64数据获取图像(文件)的原始问题:

The important part is the Base 64 - Binary conversion:

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。

下面是用 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)和插件版本:

我希望这能给大家指明正确的方向。

小开

Have to add this based on @Joseph's answer. If someone want to create image object:

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

找到了下面的解决方案(请注意——我还没有在所有浏览器上进行测试)。

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

希望对某人有所帮助:)

灵感来源:

用 JavaScript 从 Base64字符串创建 BLOB

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


提交答案