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

 更新时间:2019年07月15日 14:59:45   作者:ChorKiu  
这篇文章主要为大家详细介绍了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);
 
 });

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

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

相关文章

  • 微信小程序之判断页面滚动方向的示例代码

    微信小程序之判断页面滚动方向的示例代码

    这篇文章主要介绍了微信小程序之判断页面滚动方向的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Javascript 函数的四种调用模式

    Javascript 函数的四种调用模式

    这篇文章主要介绍了Javascript 函数的四种调用模式的相关资料,需要的朋友可以参考下
    2016-11-11
  • 为什么JS中eval处理JSON数据要加括号

    为什么JS中eval处理JSON数据要加括号

    这篇文章主要介绍了为什么JS中eval处理JSON数据要加括号的相关资料,需要的朋友可以参考下
    2015-04-04
  • Web制作验证码功能实例代码

    Web制作验证码功能实例代码

    web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码,感兴趣的朋友一起看看吧
    2017-06-06
  • 微信小程序wepy框架学习和使用心得详解

    微信小程序wepy框架学习和使用心得详解

    这篇文章主要介绍了微信小程序wepy框架学习和使用心得详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 如何获取TypeScript的声明文件.d.ts

    如何获取TypeScript的声明文件.d.ts

    这篇文章主要介绍了如何获取TypeScript的声明文件.d.ts 的相关知识,非常不错,具有参考借鉴价值,需要的朋友参考下
    2018-05-05
  • javascript中基本类型和引用类型的区别分析

    javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别。下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引用类型(Reference Types)的区别。
    2015-05-05
  • js动态创建及移除div的方法

    js动态创建及移除div的方法

    这篇文章主要介绍了js动态创建及移除div的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
    2015-06-06
  • js sort 二维数组排序的用法小结

    js sort 二维数组排序的用法小结

    我们知道在js中默认提供了sort函数,但是这个函数默认是按照数组内容的ascii码升序进行排列的,如果我们要对二维数组排序要如何做呢
    2014-01-01
  • JavaScript实现前端实时搜索功能

    JavaScript实现前端实时搜索功能

    这篇文章主要为大家详细介绍了JavaScript实现前端实时搜索功能 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04

最新评论