前端下载图片

发表于 | 更新于: | 分类于 |

有成熟的开源框架，比如 html2Canvas ,把html直接转成图片。

下载图片
  • canvas 下载 转成base64 
    1
    base64 = canvas.toDataURL("image/jpeg", quality);
下载SVG
  • SVG 下载
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY nbsp " ">]>';

    function convertToPng(src, w, h) {      
    	var canvas = document.createElement('canvas');      
    	var context = canvas.getContext('2d');      
    	canvas.width = w;      
    	canvas.height = h;  
    	context.fillStyle = '#fff'
    	context.fillRect(0, 0, w, h);
    	context.drawImage(src, 0, 0);      
    	var png;      
    	try {        
    		png = canvas.toDataURL("image/png");      
    	} catch (e) {        
    		if ((typeof SecurityError !== 'undefined' && e instanceof SecurityError) || e.name == "SecurityError") {          
    			console.error("Rendered SVG images cannot be downloaded in this browser.");          
    			return;        
    		} else {          
    			throw e;        
    		}      
    	}      
    	return png;    
    }    
    function isElement(obj) {      
    	return obj instanceof HTMLElement || obj instanceof SVGElement;    
    }    
    function reEncode(data) {      
    	data = encodeURIComponent(data);      
    	data = data.replace(/%([0-9A-F]{2})/g, function(match, p1) {        
    		var c = String.fromCharCode('0x' + p1);        
    		return c === '%' ? '%25' : c;      
    	});      
    	return decodeURIComponent(data);    
    }    
    function uriToBlob(uri) {      
    	var byteString = window.atob(uri.split(',')[1]);// 解码成ASCII    
    	var mimeString = uri.split(',')[0].split(':')[1].split(';')[0]      
    	var buffer = new ArrayBuffer(byteString.length);      
    	var intArray = new Uint8Array(buffer);      
    	for (var i = 0; i < byteString.length; i++) {        
    		intArray[i] = byteString.charCodeAt(i);      
    	}      
    	return new Blob([buffer], {
    		type: mimeString
    	});    
    }    
    function downLoad(el, name) {      
    	if (!isElement(el)) {        
    		throw new Error('an HTMLElement or SVGElement is required; got ' + el);      
    	}      
    	if (!name) {        
    		console.error("文件名为空!");        
    		return;      
    	}      
    	var xmlns = "http://www.w3.org/2000/xmlns/";      
    	var clone = el.cloneNode(true);      
    	clone.setAttribute("version", "1.1");      
    	if (!clone.getAttribute('xmlns')) {        
    		clone.setAttributeNS(xmlns, "xmlns", "http://www.w3.org/2000/svg");      
    	}      
    	if (!clone.getAttribute('xmlns:xlink')) {        
    		clone.setAttributeNS(xmlns, "xmlns:xlink", "http://www.w3.org/1999/xlink");      
    	}      
    	var svg = clone.outerHTML;      
    	var uri = 'data:image/svg+xml;base64,' + window.btoa(reEncode(doctype + svg));//转成base64 
    	var image = new Image();      
    	image.onload = function() {        
    		var png = convertToPng(image, image.width, image.height);        
    		var saveLink = document.createElement('a');        
    		var downloadSupported = 'download' in saveLink;        
    		if (downloadSupported) {          
    			saveLink.download = name + ".png";          
    			saveLink.style.display = 'none';          
    			document.body.appendChild(saveLink);          
    			try {            
    				var blob = uriToBlob(png);            
    				var url = URL.createObjectURL(blob); //创建一个新的 URL 对象           
    				saveLink.href = url;            
    				saveLink.onclick = function() {              
    					requestAnimationFrame(function() {                
    						URL.revokeObjectURL(url); //释放url                 
    					})            
    				};          
    			} catch (e) {            
    				saveLink.href = uri;          
    			}          
    			saveLink.click();          
    			document.body.removeChild(saveLink);        
    		}      
    	};      
    	image.src = uri;    
    }
    export default downLoad
下载文件
  • 利用a标签 模拟a点击
    1
    2
    3
    4
    5
    6
    7
    8
    const blob = new Blob([data])
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = data.name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)