js可以将图片文件转成base64编码的，便于图片文件的上传与处理，下面就写几种关于js脚本来转换图片为base64编码的方法。

js将图片转换为base64编码的方法

方法1

将自身网站的图片转成base64编码格式，但需要注意的是，是不能处理远程图片的，会产生一个跨域的问题。

//转换图片为base64函数 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, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); return dataURL; } var image = new Image(); image.src = 图片路径; image.setAttribute("crossOrigin",Anonymous) image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); }复制

方法2：

前台通过file类型的input选择本地图片时，自动将本地选择的图片转成base64编码格式，下面的示例代码借助的jq插件，如果不想借助jq插件，可以自行修改一下。

<input type="file" name="" id="mochu" /> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <script> $(body).on(change,#mochu,function(){ var file = document.getElementById(mochu).files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { console.log(reader.result); }, false); reader.readAsDataURL(file); });复制

分享到：