base64图片下载兼容谷歌、火狐、IE10+浏览器

base64图片下载兼容谷歌、火狐、IE10+浏览器

// 调用
doDownload("line") ;
/**
 * 图片下载
 */
function doDownload(id) {
	var mycanvas = $("#"+id).find("canvas")[0];
    var image = mycanvas.toDataURL("image/jpeg");
    
    // 使用navigator.userAgent 判断是否使用火狐浏览器
    var isFirefox=(navigator.userAgent.indexOf('Firefox') >= 0)?true:false;
    if(isFirefox){ // 使用火狐浏览器时 
    	var aLink = document.createElement('a');
    	var blob = this.base64ToBlob(image); //new Blob([content]);

    	var evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = "chart-download.png";
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
    }  
    
    if (window.navigator.msSaveOrOpenBlob){// 使用ie浏览器时
    	var bstr = atob(image.split(',')[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        var blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
    }else{// 使用谷歌浏览器时
    	var $a = document.createElement('a');
        $a.setAttribute("href", image);
        $a.setAttribute("download", "chart-download");
        $a.setAttribute("style", "background:#1c3756");
        $a.click();
    }   
}

/**
 * base64转blob
 */
function base64ToBlob(code) {
  var parts = code.split(';base64,');
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;

  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {type: contentType});
}