利用canvas把一段文字生成为图片

为什么80%的码农都做不了架构师？>>>   

function makeImage(str,width,author) {
	width = width || 450;
	author = author || "____′↘夏悸"; 
	var canvas = document.createElement("canvas");
	canvas.width = width;
	var ctx = canvas.getContext("2d");
	
	var strLenght = str.length;
	
	var start = 0,
	startX = 10,
	startY = 30,
	hasLine = true,
	lines = 1;
	
	while (hasLine) {
		while (startX < (width-17)) {
			var chart = str.substring(start, start + 1).split(" ");
			chart = unique(chart).join("");
			if (/^[a-zA-Z\d]$/.test(chart)) {
				startX = startX + 8;
			} else if (!chart) {
				startX = startX + 6;
			} else if (/^[,\.;'\?!:`~&-_\/\\]$/.test(chart)) {
				startX = startX + 6;
			} else {
				startX = startX + 17;
			}
			start++;
			if (start > strLenght) {
				hasLine = false;
				break;
			}
		}
		startX = 10;
		startY = startY + 20;
		lines++;
	}
	canvas.height = (lines+1) * 20;
	
	start = 0;
	startX = 10;
	startY = 30;
	hasLine = true;
	while (hasLine) {
		while (startX < (width-17)) {
			var chart = str.substring(start, start + 1).split(" ");
			chart = unique(chart).join("");
			ctx.font = "16px 宋体";    
			ctx.fillText(chart, startX, startY);
			
			if (/^[a-zA-Z\d]$/.test(chart)) {
				startX = startX + 8;
			} else if (!chart) {
				startX = startX + 6;
			} else if (/^[,\.;'\?!:`~&-_\/\\]$/.test(chart)) {
				startX = startX + 6;
			} else {
				startX = startX + 17;
			}
			
			start++;
			if (start > strLenght) {
				hasLine = false;
				break;
			}
		}
		startX = 10;
		startY = startY + 20;
	}
	ctx.font = "bold 16px arial";   
	ctx.textAlign = 'right';  	
	ctx.fillText("Share from the GodSon with "+author, width, startY+5);
	var dataurl = canvas.toDataURL('image/png');

	return dataurl;
	
	function unique(data){  
		data = data || [];  
			var a = {};  
		for (var i=0; i<data.length; i++) {  
			var v = data[i];  
			if (typeof(a[v]) == 'undefined'){  
				a[v] = 1;  
			}  
		};  
		data.length=0;  
		for (var i in a){  
			data[data.length] = i;  
		}  
		return data;  
	} 
}

demo 只能在支持html5的浏览器查看哦....

转载于:https://my.oschina.net/btboys/blog/41666