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 相关文章推荐
window.onload追加函数使用示例
Mar 03 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
vue环境搭建简单教程
Nov 07 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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 判断服务器操作系统的类型
2014/02/17 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
python三引号如何输入
2020/07/06 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
手机被没收的检讨书
2014/10/04 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书