当前位置: 首页 > news >正文

前端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';bgimg.src = 'https://yueuat.obs.cn-south-1.myhuaweicloud.com/images/2024/11/b055493ee430441abc276d2166a04473.jpg'// 当图片加载完成后,将其绘制到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.src = 'https://yuedev.obs.cn-south-1.myhuaweicloud.com/DSC_0029.JPG';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"){// 将文本分割成多个段落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);}}}}
</script>
</html>

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


http://www.mrgr.cn/news/71332.html

相关文章:

  • 【MQTT】代理服务比较RabbitMQ、Mosquitto 和 EMQX
  • 服务器集群的作用有什么?
  • Spring Boot编程训练系统:敏捷开发与持续集成
  • 【在Linux世界中追寻伟大的One Piece】多路转接epoll
  • SQL练习(2)
  • java数据结构与算法:栈
  • 【GPTs】Get Simpsonized:一键变身趣味辛普森角色
  • 2025计算机毕设选题精选推荐【Java方向】
  • PCB过孔分哪些,设计需注意事项
  • VirtualBox和 Vagrant
  • 力扣 LeetCode 977. 有序数组的平方(Day1:数组)
  • docker使用过程中安装wsl的问题wsl update failed错误0x800701bc
  • Python练习19
  • 24/11/12 算法笔记<强化学习> 自注意力机制
  • 【vs主程序 链接 实时生成库的问题】
  • HTTP状态码详解
  • 接口自动化测试实战(全网唯一)
  • integer==与equals()结果不同
  • Node.js笔记
  • 卸载 Python
  • 微澜:用 OceanBase 搭建基于知识图谱的实时资讯流的应用实践
  • 内网穿透,打通远程和本地调试部署测试
  • 软件测试项目实战
  • 使用docker安装mysql8
  • 炼石亮相密码丰会,探索从密码合规到数据安全实战防护
  • qt QSerialPortInfo详解