图片转成base64格式

相对路径图片转成base64格式

function image(imgurl ) {   //imgurl   本地图片路径  
				var img = imgurl ;
				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 = img;
				image.onload = function() {
					var base64 = getBase64Image(image);    //转换之后的图片路径
					console.log(base64)
				}
	}

网络路径图片转成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;
			      console.log("blob", blob)
			      // 至关重要
			      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();
			}

方法二：

                  //imgUrl 为网络图片的路径
                   let image = new Image();
					image.src = imgUrl + "?v=" + Math.random(); // 处理缓存
					image.crossOrigin = "*"; // 支持跨域图片
					image.onload = function() {
						let base64 = getBase64Image(image); //调用函数并将其转为base64图片
						//ctx.drawImage(image, 0, 0, 500, 600); //将生成的图片放在canvas中
					};
//调用函数并将其转为base64图片:
function getBase64Image(img) {
				let canvas = document.createElement("canvas");
				canvas.width = img.width;
				canvas.height = img.height;
				let ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, img.width, img.height);
				let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
				let dataURL = canvas.toDataURL("image/" + ext);
				return dataURL;
			}

浏览器下载图片

/* 图片下载 */
    var downLoadZt = {
        downLoadQRcode(imgData) {
            let filename = $("#tmedit").val();
            this.downloadFile(filename + '.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});
        }
    };