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代码
Nov 09 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 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 IP转换整形(ip2long)的详解
2013/06/06 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python3分析处理声音数据的例子
2019/08/27 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
基于python3的socket聊天编程
2020/02/17 Python
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
九州传奇上机题
2014/07/10 面试题
高中毕业生的个人自我评价
2014/02/21 职场文书
慈善晚会策划方案
2014/05/14 职场文书
运动会加油口号
2014/06/07 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2015年清明节活动总结
2015/02/09 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android