我写了一些使用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);
}
项目_图像打印base64格式,如何将base64转换为图像,以及如何在javascript客户端中使用该路径。
我在谷歌搜索了这么多网站,但它不工作,而且代码不适合我的要求。
必须根据@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);
这不完全是OP的设想,而是对一些评论者的回答。它是一个基于Cordova和Angular 1的解决方案,应该适用于其他框架,比如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文件(至少我测试过)。也应该与其他mimetype/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)和插件版本:
我希望这能让这里的每个人都朝着正确的方向前进。
您只需创建一个图像
对象,并将base64作为其src
,包括数据:图像
这样的部分:
var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);
这就是他们所说的“数据URI”,这是一个内部和平的兼容性表。
问题内容: 用户选择后,我想在 base64中 获取图像(提交表单之前) 就像是 : 我了解了文件API和其他内容,我想要一个简单的跨浏览器解决方案(显然不包括IE6 / IE7) 任何帮助表示感谢。 问题答案: function readFile() { ( PS: 一个base64编码的图像(字符串)为原始图像数据大小的4/3)
如何在不使用html5画布对象的情况下将图像url转换为base64编码的数据url。 我正在使用canvas获取base64数据。todataURL,但它无法读取远程url,因此我想在不使用canvas的情况下将图像url转换为dataurl。todataURL()并在我的应用程序中使用它 我如何才能做到这一点。
我正在做一个测试,我需要将一个图像转换为base64以存储在我的DB中 忘记DB,我只需要base64作为字符串。 这是我的表格: 这是我提交表格后的路线: 我正在使用字符串输入,如nome,telefone,cpf和email(在PT-BR中的变量) 但对于我不能这么说 当我console.log(req.body)时,我会得到以下信息: 我需要将这个levia.png图像转换为base64作为
问题内容: 我有一个要求用户将其图像上传到哪里,我必须将其转换为某种内容并将其发送到.Net REStful服务。我是angular js的新手。有人可以帮忙吗 问题答案: 我建议您使用 https://github.com/ninjatronic/angular- base64 。 在按照说明使用该库之后,您可以简单地调用: 不要忘记在模块中注入:
问题内容: 我有一个mongoDB数据库,并且恢复了对应于我的Image的base64数据。 我不知道如何将base64数据转换为Image。 问题答案: 如果您想在网页中使用它,只需将base64编码的图像放入HTML文件即可。 有关更多信息,请参见Wikipedia。
我有申请发邮件。图书馆使用了斯威夫特·梅勒。我已经生成了用于发送电子邮件html字符串,其中包含各种标记,包括标记我可以将img src标记转换为bas64图像吗 至