JS(javascript) 文字轉圖片 [阻擋爬蟲程式]

JS(javascript) 文字轉圖片 [阻擋爬蟲程式]

JS(javascript) 文字轉圖片 [阻擋爬蟲程式]


資料來源: https://blog.csdn.net/qq_30100043/article/details/76549377

https://johnson2heng.github.io/PicClipUpload/text.html


Code:

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>canvas实现文字添加渲染换行</title>
		<style>
			*{
				margin:0;
				padding: 0;
			}
			#canvas{
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="580" height="450"></canvas>

		<script>
			var string = "火影忍者,尾兽拥有无穷无尽的查克拉和战斗力,被称为“凶暴的神”,因此在忍界大战中各国为了胜利都会不择手段地去争夺它。然而,能找到尾兽并不代表你就能控制它们,要想控制它们有两种办法。一种是与尾兽彼此理解互相信任,比如鸣人那样;另一种则是凭借绝对力量完全控制尾兽!能做到前者的不少,比如鸣人、奇拉比、二位由木人等等,可拥有后者实力的却只有三人。火影忍者,尾兽拥有无穷无尽的查克拉和战斗力,被称为“凶暴的神”,因此在忍界大战中各国为了胜利都会不择手段地去争夺它。然而,能找到尾兽并不代表你就能控制它们,要想控制它们有两种办法。一种是与尾兽彼此理解互相信任,比如鸣人那样;另一种则是凭借绝对力量完全控制尾兽!能做到前者的不少,比如鸣人、奇拉比、二位由木人等等,可拥有后者实力的却只有三人。";

			//绘制文字到canvas,判断换行位置,和设置canvas高度
			function canvasWrapText(options) {
				//有时候设置的文字显示不全,需要仔细摸索行高,和绘制起始y坐标和字体大小之间的关系 更简单粗暴的就是下面canvas.height 赋值的时候多赋值点
				var settings = {
					canvas:document.createElement("canvas"), //canvas对象,必填,不填写默认创建一个canvas
					canvasWidth:580, //canvas的宽度
					canvasMinHeight:360, //canvas的最小高度,如果不需要可以设置为0
					drawStartX:10, //绘制字符串起始x坐标
					drawStartY:15, //绘制字符串起始y坐标
					lineHeight:30, //文字的行高
					font:"24px 'Microsoft Yahei'", //文字样式
					text:"请修改掉默认的配置", //需要绘制的文本
					drawWidth:560, //文字显示的宽度
					color:"#000000", //文字的颜色
					backgroundColor:"#fff00f" //背景颜色
				};

				//将传入的配置覆盖掉默认配置
				if(!!options && typeof options === "object"){
					for(var i in options){
						settings[i] = options[i];
					}
				}

				//获取2d的上线文开始设置相关属性
				var canvas = settings.canvas;
				canvas.width = settings.canvasWidth;
				var ctx = canvas.getContext("2d");

				//绘制文字
				ctx.font = settings.font;
				ctx.fillStyle = settings.color;
				var lineWidth = 0; //当前行的绘制的宽度
				var lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标
				//由于改变canvas 的高度会导致绘制的纹理被清空,所以,不预先绘制,先放入到一个数组当中
				var arr = [];
				for(var i = 0; i<settings.text.length; i++){
					//获取当前的截取的字符串的宽度
					lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width;
					
					if(lineWidth > settings.drawWidth){
						//判断最后一位是否是标点符号
						if(judgePunctuationMarks(settings.text[i-1])){
							arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex));
							lastTextIndex = i;
						}else{
							arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1));
							lastTextIndex = i-1;
						}
					}
					//将最后多余的一部分添加到数组
					if(i === settings.text.length - 1){
						arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1));
					}
				}

				//根据arr的长度设置canvas的高度
				canvas.height = arr.length*settings.lineHeight;
				//判断是否达到最小高度
				if(canvas.height < settings.canvasMinHeight){
					//重新设置起始位置
					settings.drawStartY += (settings.canvasMinHeight-canvas.height)/2;
					canvas.height = settings.canvasMinHeight;
				}

				//绘制背景色
				ctx.fillStyle = settings.backgroundColor;
				ctx.fillRect(0,0,canvas.width,canvas.height);

				//设置字体颜色
				ctx.font = settings.font;
				ctx.textBaseline = "middle";
				ctx.fillStyle = settings.color;
				for(var i =0; i<arr.length; i++){
					ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight);
				}

				//判断是否是需要避开的标签符号
				function judgePunctuationMarks(value) {
					var arr = [".",",",";","?","!",":","\"",",","。","?","!",";",":","、"];
					for(var i = 0; i< arr.length; i++){
						if(value === arr[i]){
							return true;
						}
					}
					return false;
				}

				return canvas.toDataURL();
			}

			//调用函数获取到img的data数据
			var data = canvasWrapText({canvas:document.getElementById("canvas"),text:string});

			/*--------------------------如果只需要在canvas里面显示,那就只需要调用函数,会直接显示在canvas里面-------------------------------*/

			//创建一个img对象,在页面上显示打印的数据
			var img = document.createElement("img");
			img.src = data;
			document.body.appendChild(img);

		</script>
	</body>
</html>

One thought on “JS(javascript) 文字轉圖片 [阻擋爬蟲程式]

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *