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 相关文章推荐
datagrid框架的删除添加与修改
Apr 08 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
JS代码优化的8点建议
Feb 04 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
JS深入学习之数组对象排序操作示例
May 01 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
php实用代码片段整理
2016/11/12 PHP
实例讲解PHP表单
2020/06/10 PHP
JS 遮照层实现代码
2010/03/31 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python如何实时获取tcpdump输出
2020/09/16 Python
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
安全守法证明
2015/06/23 职场文书
西游记读书笔记
2015/06/25 职场文书
教师岗位说明书
2015/09/30 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技