js实现将不同路径下的图片转为base64编码

由于浏览器安全策略的限制，javascript程序不能自由地访问本地资源，这是对用户信息安全来说，是一项不得不遵守的准则。假如网络上的javascript程序可以自如地访问用户主机的本地资源，那么浏览器用户将毫无安全可言。尽管有这个安全限制，但是在得到用户允许的情况下，浏览器还是可以访问本地资源的。

获得用户允许的方法就是通过标签来让用户手动选择文件，这一过程就是用户授予访问权限的过程。

• 情况一： 将外网服务器上的图片，转为base64 方法1

  <img id="img" src="" alt="" />
  <img id="ssss" src="https://img10.360buyimg.com/mobilecms/s140x140_jfs/t17458/302/1792090017/223266/7f72f23e/5ad851cdN50df02d5.jpg!q90.webp" alt="" />
  
  <script>
      var img = new Image();
  	console.log(img)
  
  	img.crossOrigin = ""; //跨域
  	//  document.body.appendChild(img)
  	//	img.src = $('#img').attr('src');
  	img.src = document.getElementById("ssss").getAttribute('src');
  	img.onload = function() { // 图片加载后执行的方法
  	    alert(9)
  	    var base64 = getBase64Image(img); // 将图片转成base64格式的方法
  	    //	$('#img').attr('src', base64); // 将原来的图片src改为base64格式的地址
  	    document.getElementById("img").setAttribute('src',base64) // 将原来的图片src改为base64格式的地址
  	}
  
  	function getBase64Image(img) {
  		var canvas = document.createElement("canvas"); // 创建一个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); // 得到base64 编码的 dataURL
  		console.log(dataURL)
  		return dataURL;
  	}
  </script>

   

• 情况二： 将外网服务器上的图片，转为base64，方法2

  <img id='lo' style="border: 2px solid salmon; width: 200px; height: 200px;" src=""/ >
  
  <script>
  
      var surl = 'https://img10.360buyimg.com/mobilecms/s140x140_jfs/t17458/302/1792090017/223266/7f72f23e/5ad851cdN50df02d5.jpg!q90.webp'
  
      converImg(surl, function(base64Img) {
  	//转化后的base64
  	    alert(base64Img);
  	    document.getElementById('lo').setAttribute('src', base64Img)
  	});
  
  	function converImg(url, callback, outputFormat) {
  		var canvas = document.createElement('CANVAS'),
  		ctx = canvas.getContext('2d'),
  		img = new Image;　　
  		//	img.crossOrigin = 'Anonymous';　　
  		img.crossOrigin = '';
  		img.onload = function() {　　
  		canvas.height = img.height;　　
  		canvas.width = img.width;　　
  		ctx.drawImage(img, 0, 0);　　
  		var dataURL = canvas.toDataURL(outputFormat || 'image/png');　　
  		callback.call(this, dataURL);　　
  		canvas = null;
  	};　　
  
  	img.src = url;
  }
  </script>

   

• 情况三： 用户通过input[type='file']，将图片 转为base64

<input type="file" onchange="selectImage(this.files)" id="imgSel" value="" />
<img id="new" src="" style="width: 40px; height: 40px;border: 1px dashed #000;" />

<script>
    function selectImage(e) {
		let upload = document.getElementById("imgSel"); //input标签type=file
		var reader = new FileReader(); //创建一个字符流对象
                var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
		console.log(upload.files[0]);
		reader.readAsDataURL(upload.files[0]); //读取本地图片

		reader.onload = function(e) {
                if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                    alert( '上传失败，请上传不大于2M的图片！');
                    return;
                }else{
                    //执行上传操作
                    alert(this.result); //返回数据
                    console.log(this.result)
			        let newa = document.getElementById("new"); //不能命名为new，因为new为关键字
			        newa.setAttribute("src", this.result)
            }

		}
	}
</script>

补充：当不加 img.crossOrigin = ''  或者 img.crossOrigin = 'Anonymous' 时，我们使用的淘宝服务器上的一张图片，在本地服务器下访问，会出现图片跨域的问题；我们可以把图片放在本地服务器下即可解决上面的跨域问题，比如我现在将淘宝服务器下的图片保存在本地服务器下；如下代码即可解决 var img = "http://127.0.0.1/base64/1.jpg";