使用图像文件，我获取图像的 url，需要发送到网络服务。从那里图像必须本地保存在我的系统上。
我正在使用的代码：
var imagepath = $("#imageid").val();// from this getting the path of the selected image
that var st = imagepath.replace(data:image/png or jpg; base64"/"");
如何将图像 url 转换为 BASE64？
将图像 url 转换为 Base64
IT技术
javascript
jquery
2021-01-30 05:41:49
6个回答
HTML
<img id=imageid src=https://www.google.de/images/srpr/logo11w.png>
JavaScript
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
var base64 = getBase64Image(document.getElementById("imageid"));
这个方法需要canvas元素，完美支持。
- 的 MDN 参考
HTMLCanvasElement.toDataURL()。 - 以及官方的W3C 文档。
查看此答案：@HaNdTriX https://stackoverflow.com/a/20285053/5065874
基本上，他实现了这个功能：
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
在您的情况下，您可以像这样使用它：
toDataUrl(imagepath, function(myBase64) {
console.log(myBase64); // myBase64 is the base64 string
});
在今天的 JavaScript 中，这也适用。
const getBase64FromUrl = async (url) => {
const data = await fetch(url);
const blob = await data.blob();
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result;
resolve(base64data);
}
});
}
getBase64FromUrl('https://lh3.googleusercontent.com/i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD_0mOXaYZMzekfKW_ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8').then(console.log)这是你的 html-
<img id="imageid" src="">
<canvas id="imgCanvas" />
Javascript 应该是-
var can = document.getElementById("imgCanvas");
var img = document.getElementById("imageid");
var ctx = can.getContext("2d");
ctx.drawImage(img, 10, 10);
var encodedBase = can.toDataURL();
'encodedBase' 包含图像的 Base64 编码。
你可以用这个：
function ViewImage(){
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
var file = document.querySelector('input[type="file"]').files[0];
getBase64(file).then(data =>$("#ImageBase46").val(data));
}
添加到您的输入 onchange=ViewImage();