js canvas实现5张图片合成一张图片


Posted in Javascript onJuly 15, 2019

本文具体要实现的效果类似下面这张图片,主题流程大概是,页面上有类似这样布局的结构,点击中间那个紫色的按钮就会生成一张这样的图片,并且能够让用户下载图片的

js canvas实现5张图片合成一张图片

1、首先我们布局页面的时候用的都是图片来布局成这个样子[CSS自己脑补],class为pho-bg这一段是页面开始显示的结构,几张图片定位,按钮在中间的样子。class为photo的就是用来到时候放置生成的图片。canvas就是画布。至于下面的两张图片其实就是按钮的图片和背景图,到时候一并加入画布里面【不过在页面的时候不显示】

<div class="pho-bg">
 <img src="ossweb-img/man-1.png" class="man man-1" id="man-1" alt="">
 <img src="ossweb-img/man-2.png" class="man man-2" id="man-2" alt="">
 <img src="ossweb-img/man-3.png" class="man man-3" id="man-3" alt="">
 <img src="ossweb-img/man-4.png" class="man man-4" id="man-4" alt="">
 <a href="javascript:;" class="btn" title=""></a>
 <img src="ossweb-img/sen.png" class="sen1" id="sen1" alt="">
 <img id="show-pic" alt="">
 </div>
 <div class="photo"></div>
 <canvas id="myCanvas" width="750" height="1180"></canvas>
 <img src="ossweb-img/bg1.jpg" id="bg1" alt="">
 <img src="ossweb-img/btn.png" id="btn1" alt="">

2、重要的是js部分,这里面有几个部分

  • 在点击按钮时隐藏掉本来的页面,显示画布生成的图片
  • canvas.width,canvas.height是设置你生成的图片的大小。举个例子:如果我在canvas的html标签里面设置的width=750,height=1180,但是在js里面设置了canvas.width=500,canvas.height=500,那么生成的图片的大小就会是500*500.
  • 使用createPattern来制作图片的背景图
  • 使用drawImage()来制作组成图片的小元素也就是红、黄、蓝、绿、紫那几张图片
  • 最后用toDataURL()将画布的内容转为图片并且渲染到页面上
$('.btn').click(function() {
 $('.pho-bg').hide();
 // $('#myCanvas').show();
 var man1 = document.getElementById("man-1"),
 man2 = document.getElementById("man-2"),
 man3 = document.getElementById("man-3"),
 man4 = document.getElementById("man-4"),
 sen1 = document.getElementById("sen1"),
 btn1 = document.getElementById("btn1"),
 canvasBg = document.getElementById("bg1");
 
 
 var canvas = document.getElementById("myCanvas");
 ctx = canvas.getContext("2d");
 canvas.width = 750;
 canvas.height = 1180;
 // 制作背景图
 var patBg = ctx.createPattern(canvasBg, "repeat");
 ctx.rect(0, 0, 750, 1180);
 ctx.fillStyle = patBg;
 ctx.fill();
 // 将man1,man2,man3,man4,sen1,btn加入画布
 ctx.drawImage(man1, 0, 0, 341, 474);
 ctx.drawImage(man2, 410, 0, 341, 474);
 ctx.drawImage(man3, 0, 474, 341, 474);
 ctx.drawImage(man4, 410, 474, 341, 474);
 
 ctx.drawImage(sen1, 40, 950, 669, 109);
 ctx.drawImage(btn1, 150, 350, 449, 288);
 var newImg = new Image();
 newImg.src = canvas.toDataURL("image/png");
 
 $('.photo').append(newImg);
 
 });

最后的结果生成的图片就是这样子的

js canvas实现5张图片合成一张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 #Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 #Javascript
微信小程序开发技巧汇总
Jul 15 #Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 #Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 #Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 #Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php intval函数用法总结
2019/04/14 PHP
对联广告js flash激活
2006/10/19 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
深入理解vue Render函数
2017/07/19 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python for循环及基础用法详解
2019/11/08 Python
python滑块验证码的破解实现
2019/11/10 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
关于赌博的检讨书
2014/01/08 职场文书
高三生物教学反思
2014/01/25 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
优秀公益广告词大全
2014/03/19 职场文书
校本课程教学计划
2015/01/19 职场文书