canvas读取图片，输入文字，调整文字属性，拖拽文字位置，并保存图片

于 2021-08-19 17:14:50 发布 1788 收藏 3
分类专栏： 前端 文章标签： canvas html5 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39019865/article/details/119806593
版权

不是专门做前端的，代码写的不太好，权当抛砖引玉。

整体思路：
共有5层，除了背景颜色的div没什么用之外，canvas1用来读取图片作为背景，canvas2把文字展示出来，并记录拖拽文字的位置，canvas4 绘制拖拽后文字的位置，canvas3在最后保存的时候，把背景图片和文字重新绘制出来，canvas4用来把canvas1背景图片和canvas3拖拽后的文字给画到一个canvas上，保存图片，还有一个canvas，判断canvas1是不是空的。

除此之外，还用到了判断当前浏览器支持的字体，和颜色选择器，网络上都可以找到就不说了。

下边儿是效果和代码
请添加图片描述

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
		<script type="text/javascript" src="js/font-ch-en.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/isSupportFontFamily.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/jquery1.4.3.js"  charset="utf-8"></script> 
		<script type="text/javascript" src="js/jquery.colorpicker.js"  charset="utf-8"></script>
		<style>
			td{
				text-align: center;
			}
		</style>
	</head>
	<body style="background-color: #F1F2F6;">
		<div>
			<div id="canvas_box" style="overflow: hidden;position: relative;">
				<div style="width: 900px;height: 600px;background: #333;float: left;border-radius: 10px;margin-left: 100px;margin-top: 40px;"></div>
				<canvas id="canvas3" style="width: 900px;height: 600px;display: block;position: absolute;margin-left: 100px;margin-top: 40px;" ></canvas>
				<canvas id="canvas4" style="width: 900px;height: 600px;display: block;position: absolute;margin-left: 100px;margin-top: 40px;" ></canvas>
				<canvas id="canvas1" style="width: 900px;height: 600px;display: block;position: absolute;margin-left: 100px;margin-top: 40px;" ></canvas>
				<canvas id="canvas2" style="width: 900px;height: 600px;display: block;position: absolute;margin-left: 100px;margin-top: 40px;" ></canvas>
			</div>
			<div style="position: absolute;margin-left: 1100px;margin-top: -500px;">
				<table style="border: solid 3px #7399cd;width: 280px;height: 360px;border-radius: 10px;">
					<tr>
						<td >
							<input type="button" value="请选择图片" onclick="javascript:$('input[name=\'file\']').click();" style="border-radius: 5px;background-color: #337AB7;color: #F2FFFF;border: none;height: 35px;width: 90px;"/>
							<input name="fileName" readonly  style="background-color: transparent;border:0;display: none;"/>
							<input type="file" name="file" id="fileOne" accept=".jpg,.png" style="display: none;" onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);" />
						</td>
					</tr>
						<td>
							<div >请输入名字&nbsp;
								<input id="name" type="text" style="border-radius: 5px;border: 1px solid #3F3F40;width: 80px;" oninput="changeFont()" />
							</div>
						</td>
					<tr>
						<td>
							<div >请选择字体&nbsp;
								<select id="fontFam" style="border-radius: 5px;border-color: black;width: 88px;height: 22px;" onchange="changeFont()">
									<option>请选择</option>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div >请选择样式&nbsp;
								<select id="fontSty" style="border-radius: 5px;border-color: black;width: 88px;height: 22px;"  onchange="changeFont()">
									<option value="normal">正常</option>
									<option value="oblique">斜体</option>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div >请选择粗细&nbsp;
								<select id="fontSty" style="border-radius: 5px;border-color: black;width: 88px;height: 22px;"  onchange="changeFont()">
									<option value="normal">常规</option>
									<option value="600">斜体</option>
									<option value="900">斜体</option>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div >请选择字号&nbsp;
								<input id="Btn1" type="button" value="+" name=""/>
								<input id="fontSize" value="12" style="border-radius: 5px;border: 1px solid #3F3F40;width: 30px;text-align: center;height: 18px;" onchange="changeFont()"/>
								<input id="Btn2" type="button" value="-" name=""/>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div >请选择颜色&nbsp;
								<input type="text" id="fontCol" value="#DBD71E" style="border-radius: 5px;border: 1px solid #3F3F40;width: 80px;" oninput="changeFont()" onchange="changeFont()"/>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<font style="color: red;" size="2">拖动左侧文字以调整位置</font>
						</td>
					</tr>
					<tr>
						<td >
							<input type="button" id="btn" value="下载图片" style="border-radius: 5px;background: #5CB85C;color: #fcfcf9;border: none;height: 35px;width: 90px;" onclick="downloadimg()"/>
						</td>
					</tr>
				</table>
				<div id="result">
				        
				    </div>
			</div>
		</div>
		<script>
			
			/*  canvas1	显示背景图片
				canvas2	显示文字，并记录拖拽文字的位置
				canvas4	绘制拖拽后文字的位置
				canvas3	最后保存的时候，把背景图片和文字重新绘制出来
			*/
			
			// 文字样式
			const fontSty = document.getElementById('fontSty');
			// 文字内容
			const name = document.getElementById("name");
			// 文字字体
			const fontFam = document.getElementById('fontFam');
			
			// 文字大小
			const fontSi = document.getElementById("fontSize");
			// 文字颜色
			const fontCol = document.getElementById("fontCol");
			
			const oBtn1=document.getElementById("Btn1");
			const oBtn2=document.getElementById("Btn2");
			
			const canvas1 = document.getElementById('canvas1');
			const ctx1 = canvas1.getContext('2d');
			
			const canvas2 = document.getElementById('canvas2');
			const ctx2 = canvas2.getContext('2d');
			
			const canvas3 = document.getElementById('canvas3');
			const ctx3 = canvas3.getContext('2d');
			
			const canvas4 = document.getElementById('canvas4');
			const ctx4 = canvas4.getContext('2d');
			
			const canvas5 = document.getElementById('canvas5');
			
			const inputOne = document.getElementById('fileOne');
			
			window.onload= function(){
				// 获取浏览器支持的字体
				loadFontFamily()
			}
			
			// 字号+-点击动作
			oBtn1.onclick = function(){
				num = fontSi.value;
				num++;
				fontSi.value = num;
				if ("createEvent" in document) {
					var evt = document.createEvent("HTMLEvents");
					evt.initEvent("change", false, true);
					fontSi.dispatchEvent(evt);
				} else {
					fontSi.fireEvent("onchange");
				}
			};
			oBtn2.onclick = function(){
				num = fontSi.value;
				num--;
				fontSi.value = num;
				if ("createEvent" in document) {
					var evt = document.createEvent("HTMLEvents");
					evt.initEvent("change", false, true);
					fontSi.dispatchEvent(evt);
				} else {
					fontSi.fireEvent("onchange");
				}
			}
			
			//颜色拾取器
			$("#fontCol").colorpicker({
			    target:'#title',
			    success:function(o,color){
			        fontCol.value = color
					if ("createEvent" in document) {
						var evt = document.createEvent("HTMLEvents");
						evt.initEvent("change", false, true);
						fontCol.dispatchEvent(evt);
					} else {
						fontCol.fireEvent("onchange");
					}
			    },
			    reset:function(o){
					fontCol.value = '#000000'
			    }
			});
			
			// 获取浏览器支持的字体
			function loadFontFamily(){
				// 数据
				var arrFont = dataFont['windows'].concat(dataFont['OS X'], dataFont['office'], dataFont['open']);
				var option = '';
				arrFont.forEach(function (obj) {
				    var fontFamily = obj.en;
				    if (isSupportFontFamily(fontFamily)) {
				        option = option + '<option value="'+ fontFamily +'">'+ obj.ch +'</option>';
				    }
				});
				fontFam.innerHTML = option;
				fontFam.value = "STXingkai";
			}
			
			//读取本地文件
			inputOne.onchange = function () {
				//1.获取选中的文件列表
				var fileList = inputOne.files;
				var file = fileList[0];
				//读取文件内容
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function (e) {
					//将结果显示到canvas
					showCanvas(reader.result);
				}
			}
			
			//指定图片内容显示
			function showCanvas(dataUrl) {
				//加载图片
				var img = new Image();
				img.src = dataUrl;
				img.onload = function(){
					//设置宽高一定要在canvas节点添加之后
					canvas1.width = img.width;
					canvas1.height = img.height;
					canvas2.width = img.width;
					canvas2.height = img.height;
					
					ctx1.drawImage(this, 0, 0,img.width,img.height);
				}
			}
			
			//canvas2的拖拽动作
			var aa  = 0 
			var bb =  0 
			canvas2.onmousedown = function(args){
			    var evt = args || event;
				
			    var StartX = evt.clientX;
			    var StartY = evt.clientY;
			    let initleft = Number((canvas2.style.left).replace('px',''))
			    let inittop = Number((canvas2.style.top).replace('px',''))
				
			    document.onmousemove = function(ev){   
			        var iEvent = ev||event; 
			        // 鼠标移动的距离
			        let left = iEvent.clientX - StartX;
			        let top = iEvent.clientY - StartY;
			        // 鼠标移动的距离 + 最开始的top 或者 left 就是最终的位置
			        canvas2.style.left = left + initleft + 'px';
			        canvas2.style.top = top + inittop +'px';
					aa = (left + initleft)/900;
					bb = (top + inittop)/600;
					
			    }
			    document.onmouseup = function(){  
			        document.onmousedown = null;  
			        document.onmousemove = null;  
			    };  
			    return false;  
			}
			
			//验证canvas画布是否为空函数
			function isCanvasBlank(canvas) {
			    var blank = document.createElement('canvas');//系统获取一个空canvas对象
			    blank.width = canvas.width;
			    blank.height = canvas.height;
			    return canvas.toDataURL() == blank.toDataURL();//比较值相等则为空
			}
			//修改文字属性
			var fontStyle = ''
			var fontFamily = ''
			var fontSize = ''
			var fontt = ''
			var fontColor = ''
			function changeFont(){
				
				if(isCanvasBlank(canvas1)){
				    alert("请先选择图片");
				    return;
				}
				
				var text = name.value;
				fontStyle = fontSty.value;
				fontFamily = fontFam.value;
				fontSize = fontSi.value;
				fontt = fontStyle+' '+fontSize+'0px'+' '+ fontFamily;
				fontColor = fontCol.value;
				
				canvas2.width = canvas2.width
				canvas3.width = canvas3.width
				if(canvas2.getContext){
					ctx2.beginPath();
					ctx2.fillStyle = fontColor;// 设置填充画笔颜色为红色，即字体颜色
					ctx2.font = fontt;// 设置字体大小
					ctx2.fillText(text,700,1030);// 绘制 "实心" 文字
					// fillText(str, x, y, maxW)：str绘制的文字，(x, y)起始坐标，maxW是最大宽度，绘制文字超过该宽度则不显示。
					ctx2.closePath();
				}else{
					alert('不支持');
				}
				
			 }
			 
			 //保存图片
			function downloadimg() {
				
				document.getElementById("btn").disabled = true;
				
				canvas3.getContext('2d');
				canvas3.width = canvas1.width;
				canvas3.height = canvas1.height;
				
				canvas4.width = canvas1.width;
				canvas4.height = canvas1.height;

				ctx4.beginPath();
				ctx4.fillStyle = fontColor;// 设置填充画笔颜色为红色，即字体颜色
				ctx4.font = fontt;// 设置字体大小
				ctx4.fillText(name.value,700+aa*canvas2.width,1030+bb*canvas2.height);// 绘制 "实心" 文字
				ctx4.closePath();
				
				ctx3.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
				ctx3.drawImage(canvas4, 0, 0, canvas1.width, canvas1.height);
				
				// 创建一个 a 标签，并设置 href 和 download 属性
				const el = document.createElement('a');
				// 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
				el.href = canvas3.toDataURL();
				el.download = name.value;
				// 创建一个点击事件并对 a 标签进行触发
				const event = new MouseEvent('click');
				el.dispatchEvent(event);
				
				canvas4.width = canvas1.width;
				
				document.getElementById("btn").disabled = false;
			}
		</script>
	</body>
</html>

tips:实际应用的时候，发现判断canvas为空这个比较耗资源，会导致填写文字的时候卡卡的。

Naix1573
关注
专栏目录
html5 图片文字提取,HTML5 Canvas：获取canvas内容-toDataURL()
weixin_35774446的博客
06-04 2160
我们可以通过canvas的toDataURL()方法来获取绘制在HTML5 canvas中的内容。做法类似下面的示例代码：var canvas = document.getElementById("ex1");var dataUrl = canvas.toDataURL();从toDataURL()方法中返回的数据是一个经过编码的URL，它里面包含了从canvas中抓取的图形的数据。我们可以将这...
canvas拖拽功能实现
m0_37573249的博客
01-07 1304
在默认状态下对图形的操作都是基于左上角为原点进行操作的，但在特定的场景下，我们希望改变原点的位置或者根据鼠标指针实时调整对图形的拖拽位置。这时就需要对原点进行相应的调整。例如我们要实现一个拖拽功能，根据鼠标点击图形上的任何一个位置对图形进行拖拽移动。 默认状态下，当我们点击图形并拖拽图形时会发现，在我们清空画布后对图形坐标进行重新绘制，发现鼠标指针的拖拽点往往始终偏移到图形的左上角原点位置为指针位置，那如何保持鼠标指针点击图形上的哪个位置就始终保持不变呢。那就涉及到鼠标按下到拖...
HTML5 canvas获取图片
热门推荐
懒虫一个V
05-06 1万+
//将图像输出为base64压缩的字符串  默认为image/png var data = canvas.toDataURL();    // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..." //var data = canvas.toDataURL('image/jpeg');  //re
canvas 像素操作（图片像素操作）
最新发布
qq_17627195的博客
08-01 79
ImageData对象中的每个像素都保存了rgba色值的四个值，这四个值以数组形式存在，并存储于ImageData对象的data属性中，并且是将所有的像素的rgba信息存到了一个一维数组里面。getImageData()方法返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。方法将图像数据（从指定的ImageData对象）放回画布上。方法直接看下面的教程就可以，一看就明白了。......
HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
CodingNoob
03-18 2391
代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
利用canvas获取图片像素值
Super洛伽的博客
01-19 1万+
利用canvas的getImageData方法可以读取画布的某位置像素值。1.首先创建一个canvas对象， var canvas = document.createElement(‘canvas’); 2.获取它的2d上下文。 var context = canvas.getContext(‘2d’); 3.创建一个image对象,并指定它的图片路径，设置允许跨域 var image =
Canvas-绘图-路径
weixin_44790446的博客
03-22 84
路径：绘制不规则图形（复杂） path：由多个坐标点组成任意图形，图形本身不可见，可以描边或者填充 ctx.beginPath();//开始一条新路径(上一条路径结束) ctx.moveTo(x,y);//移动到指定点(x,y) ctx.lineTo(x,y);//从当前点到指定点绘制一条直线(x,y) ctx.stroke();//描边 ctx.fill();//填充 ctx.closePath();//闭合一条路径(结束点到开始点画一条直线) ctx.arc(cx,cy,r,start.
canvas获取图片base64
QQ657205470的博客
01-07 772
//方法 function getBase64(image) { let canvas = document.getElementById("canvas"); canvas.height= image.height; canvas.width = image.width; let ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0, image.width, image.height); // c
python获取网页canvas图片并添加至excel中
qq_54085445的博客
02-28 1141
canvas是目前主要流行的网页图片制作元素，以下图为例，图片元素中仅包含canvas的画布信息，无法得到其中具体的数据。 此处介绍如何保存图片，想得到具体数据可查看主页另一篇文章。可以先将图片信息保存为base64格式数据信息，再解码为byte形式保存至计算机中。 js = f'''return document.getElementsByTagName("canvas")[{0}].toDataURL("image/png");'''#数字表示第几个canvas base64str = driver.e
通过canvas获取图片base64位编码
zhang_cherry的博客
01-04 1384
前言 canvas是HTML5提供的一种2D绘图工具，官方库中提供了各种可以绘制直线、矩形、多边形等形状的API。在前端和后端的交互中，后端往往需要在前端获取图片的base64位编码信息，而canvas提供了getImageData和toDataURL等接口，使前端能够方便地获取图片信息。
关于canvas的图片获取及处理
YYLOVEYY520的博客
12-08 846
关于canvas的图片获取及处理获取canvas图片的对应base64的uri（echart图、v-chart图前端处理生成的uri，可以生成一张图片python处理canvas生成的base64 uri 获取canvas图片的对应base64的uri（echart图、v-chart图 canvas元素.toDataURL()获取对应canvas的base64 uri的链接 前端处理生成的uri，可以生成一张图片 <img src="base64uri"/> python处理canvas生成的
canvas图片转数据流失败
winnifred的博客
06-26 1090
想做ocr识别，前台微信页面上传图片，对图片内容进行处理。本来的做法是在前台用canvas将图片转换成数据流，用ajax传到后台进行识别。前台报错：“Access to Image at '图片路径' from origin '*****' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is pre...
canvas、javaScript实现取色器，获取本地图片的RGB值
weixin_42272653的博客
06-24 5714
本文只是用于本人学习的记录，存在bug，图片过大会导致取色有问题，猜想是边框设置问题，后续改进~1.页面结构如下：&lt;h1&gt;取色器&lt;/h1&gt; &lt;div class="bd"&gt; &lt;div class="huabu" &gt; &lt;input type="file" id="file_input&quot
通过canvas获取图片平均色值
qq_37575040的博客
05-17 253
通过canvas获取图片的平均像素，解决banner轮播图尺寸不一致的应用场景
canvas获取图片颜色和吸取图片颜色，RGBA和HEX
weixin_30980795的博客
05-12 316
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>getcolor&l
从0开始canvas系列三 --- 图像像素级操作
qq_41361668的博客
05-01 170
从0开始canvas系列 从0开始canvas系列一 — canvas画布 从0开始canvas系列二 — 文本和图像 从0开始canvas系列三 — 图像像素级操作 图像像素级操作 imageData对象 大家都知道图片是由许多的像素点构成的，canvas对图像的操作也是基于像素点的，所有的像素点信息都可以存放在imageData实例中 ImageData() 构造函数返回一个新的实例化的 ImageData 对象， 此对象由给定的类型化数组和指定的宽度与高度组成 new ImageData([arr
java canvas 打开图片_一步步教你利用Canvas对图片进行处理
weixin_34023576的博客
02-27 424
前言Canvas，中文译为“画布”，HTML5中新增了元素，可以结合JavaScript动态地在画布中绘制图形。今天，我们不讲Canvas的图形绘制，而是讲如何对图片进行处理，话不多说了，来一起看看详细的介绍吧。大概流程非常简单，主要分为以下三个步骤：Canvas图片处理是的，就像把大象装进冰箱一样简单，哈哈。一、主要API整个流程中所用到的主要Canvas API有：绘制图像： drawImag...
html读取图片并转换成base64,html5 canvas 加载图片URL并转换成base64
weixin_39679091的博客
06-02 181
异步加载图片到canvas并拿掉data:image;base64部分。function convertImgToBase64(url, callback, outputFormat){var img = new Image();img.crossOrigin = 'Anonymous';img.onload = function(){var canvas = document.createEle...
canvas 图片跨域（二）
奔跑吧笨笨的博客
05-06 1万+
在canvas 图片跨域（一）中，关于canvas跨域问题进行处理，提供的方法是后端提供base64文件资源，既把oss（图片URL）,抓取到服务器，然后返回给客户端。      但上线以后，出现了很严重的问题，既资源占用太大。海报的生成 需要后端提供base64的资源，后端php解决办法三种：1.  每次需要的时候，curl 抓取路径的资源转为bse642. 只抓取一次，存入DB3. 只抓取一次...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题：技术黑板 设计师：CSDN官方博客 返回首页
评论

打赏作者

Naix1573

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值