将图像url转换为Base64
使用图像文件，我得到一个图像的url，需要发送到一个web服务。 从那里，图像必须保存在我的系统本地。
我正在使用的代码：
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？
HTML
<img id=imageid src=https://www.google.dehttp://img.dovov.comsrpr/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元素。
-
HTMLCanvasElement.toDataURL()的MDN引用。 - 和官方的W3C文档 。
这是你的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编码。
查看此答案： https ://stackoverflow.com/a/20285053/5065874由@HaNdTriX
基本上他实现了这个function：
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 });
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> <div id="imgTest"></div> <script type='text/javascript'> function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("imgTest").innerHTML = newImage.outerHTML; alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); } fileReader.readAsDataURL(fileToLoad); } } </script>
