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 相关文章推荐
javaScript复制功能调用实现方案
Dec 13 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
原生js简单实现放大镜特效
May 16 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 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 分页原理分析,大家可以看看
2009/12/21 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
如何真正的了解python装饰器
2020/08/14 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
办公室前台岗位职责
2014/01/04 职场文书
写给老师的表扬信
2014/01/21 职场文书
青年文明号创建承诺
2014/03/31 职场文书
个人总结与自我评价
2014/09/18 职场文书
辩论会主持词
2015/07/03 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Python+tkinter实现高清图片保存
2022/03/13 Python
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫