本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

网络图片转base64

// 将网络图片转成Base64
 let imgUrl="https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg"
getBase64Image(imgUrl)

function getBase64Image(imgUrl) {
             if(imgUrl != "") {
		let image = new Image();
		image.src = imgUrl + "?v=" + Math.random(); // 处理缓存
		image.crossOrigin = "*"; // 支持跨域图片
		image.onload = function() {
			// let base64 = getBase64Image(image); //调用函数并将其转为base64图片
                     let canvas = document.createElement("canvas");
                         canvas.width = image.width;
                         canvas.height = image.height;
                         let ctx = canvas.getContext("2d");
                         ctx.drawImage(image, 0, 0, image.width, image.height);
                         let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
                         let dataURL = canvas.toDataURL("image/" + ext);
                         console.log(dataURL);
                         return dataURL;
		};
	}
	
}

本地图片转成Base64

image("img/banner-01.jpg")

function image(imgurl ) {   //imgurl   本地图片路径  
	var img = imgurl ;
	var image = new Image();
	image.src = img;
	image.onload = function() {
		getBase64(imgurl)
	}
}
         // 把图片转成base64格式
function getBase64(imgUrl) {
  window.URL = window.URL || window.webkitURL;
  var xhr = new XMLHttpRequest();
  xhr.open("get", imgUrl, true);
  // 至关重要
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (this.status == 200) {
      //得到一个blob对象
      var blob = this.response;
      // 至关重要
      let oFileReader = new FileReader();
      oFileReader.onloadend = function (e) {
        // 此处拿到的已经是 base64的图片了
        let base64 = e.target.result;
       downLoadZt.downLoadQRcode(base64);
      };
      oFileReader.readAsDataURL(blob);
      //====为了在页面显示图片，可以删除====
   //    var img = document.createElement("img");
   //    img.onload = function (e) {
   //      window.URL.revokeObjectURL(img.src); // 清除释放
   //    };
   //    let src = window.URL.createObjectURL(blob);
   //    img.src = src
	  // console.log(src)
      //document.getElementById("container1").appendChild(img);
      //====为了在页面显示图片，可以删除====
    }
  }
  xhr.send();
}

图片导出下载

// 图片下载传入的参数必须是bease64格式
			 var downLoadZt = {
			        downLoadQRcode(imgData) {
			            let filename = $("#tmedit").val();//名字
			            this.downloadFile("aaa" + '.png', imgData);
			        },
			        // 下载
			        downloadFile(fileName, content) {
			            let aLink = document.createElement('a');
			            let blob = this.base64ToBlob(content); // new Blob([content]);
			            let evt = document.createEvent('HTMLEvents');
			            evt.initEvent('click', true, true);// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
			            aLink.download = fileName;
			            aLink.href = URL.createObjectURL(blob);
			            aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));// 兼容火狐
			        },
			        // base64转blob
			        base64ToBlob(code) {
			            let parts = code.split(';base64,');
			            let contentType = parts[0].split(':')[1];
			            let raw = window.atob(parts[1]);
			            let rawLength = raw.length;
			
			            let uInt8Array = new Uint8Array(rawLength);
			
			            for (let i = 0; i < rawLength; ++i) {
			                uInt8Array[i] = raw.charCodeAt(i);
			            }
			            return new Blob([uInt8Array], {type: contentType});
			        }
			    };