前端js用canvas合成图片并转file对象

强大的前端js可以做很多东西,今天用canvas合成图片并添加文字,然后转成file对象进行上传。代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
	<canvas id="myCanvas"></canvas>
</body>
<script>
	window.onload = function() {
		// 获取Canvas元素
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');
		 
		// 创建新的Image对象
		var bgimg = new Image();
		bgimg .crossOrigin = "Anonymous";  // 加这句
		// 设置图片源地址
		bgimg.src = 'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg';
		 
		// 当图片加载完成后,将其绘制到Canvas上
		bgimg.onload = function() {
			// 设置Canvas的宽高,如果不设置,默认以图片的尺寸显示
			canvas.width = bgimg.width;
			canvas.height = bgimg.height;
		 
			// 将图片绘制到Canvas上
			ctx.drawImage(bgimg, 0, 0);
			
			// 合并图片
			var img1 = new Image();
			img1.src = 'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg';
			img1.onload = function() {
				// 将图片绘制到bgimg上
				// 横图  等比例缩小 上下居中绘制
				var width = bgimg.width / 2;
				var height = (width * img1.height) / img1.width;
				ctx.drawImage(img1, 0, (bgimg.height / 2) - (height / 2),width,height);
				// 如果文字被图片遮住是因为异步,可以把绘制文字放在这里面进行绘制...
			}
			// 添加文字
			ctx.font = '50px Arial';
			ctx.fillStyle = '#000';
			var txt = "那是一个阳光明媚的上午十点,我和\n越添科技的伙伴们一同来到了\n深圳的心智青老年大学,开展一\n场特别的梦想。";
			var txtX = (bgimg.width / 2) + 300;
			text(ctx,txt,txtX,600,(bgimg.width - txtX - 300),100);
			
			// 创建Blob对象
			canvas.toBlob(blob => {
				const file = new File([blob], "canvas.png", {type: "image/png"});
				// file对象可在这里进行上传
				console.log(11111,file);
			});
		};
		
		/** 绘制自动换行文字
		 * @param ctx 画布上下文
		 * @param text 文字
		 * @param x 坐标x
		 * @param y 坐标y
		 * @param maxWidth 文字最大宽度(0表示竖排显示)
		 * @param maxWidth 文字行高
		 * @param split 按照指定符号切割成段落
		 */
		function text(ctx,text,x=0,y=0,maxWidth=300,lineHeight=20,split="\n"){
			ctx.save();
			// 将文本分割成多个段落
			var paragraph = text.split(split);
			for(var k = 0; k < paragraph.length; k++) {
				if(k != 0){
					y += lineHeight;
				}
				var lines = paragraph[k].split('');
				var line = "";
				for(var i = 0; i < lines.length; i++) {
					line += lines[i];
					if(ctx.measureText(line).width > maxWidth){
						line = lines[i];
						y += lineHeight;
					}
					ctx.fillText(line, x, y);
				}
			}
			ctx.restore();
		}
	}
</script>
</html>

到此完成,跑一下看看是不是可以了。

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----1 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024061 小时前
SQL SELECT 语句:基础与进阶应用
开发语言
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
向宇it2 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎
武子康2 小时前
Java-06 深入浅出 MyBatis - 一对一模型 SqlMapConfig 与 Mapper 详细讲解测试
java·开发语言·数据仓库·sql·mybatis·springboot·springcloud