hi,欢迎访问本站!
当前位置: 首页前端设计正文

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

xiaoqihv 前端设计 5931阅读

在web前端中,有时候为了上传图片方便或者安全一类的考虑,需要利用JS脚本代码,先将图片文件转换成base64编码的的文件再进行上传,下面就介绍两种利用JS脚本对图片进行base64转码的方法。

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

方法1

将网站自身的图片转成base64编码格式,但需要注意的是,如果处理的为非本站的图片,会产生一个跨域的问题。

// 73so.comfunction 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编码格式。

<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);});
标签:
声明:无特别说明,转载请标明本文来源!