JavaScript实现图片合成下载的示例


Posted in Javascript onNovember 19, 2020

最近项目一个功能需求,需实现将两张图片合成后下载的一个功能。分析完功能需求后,决定直接使用前端技术来实现。为提高效率,使用插件(html2canvas)配合编写此功能。有关插件(html2canvas)的介绍,这里不多说明,大家可自行网上查阅。以下直接附上效果演示图以及完整代码

效果演示:

JavaScript实现图片合成下载的示例

完整代码:(代码复制可直接使用)

注:最好将代码文件放在服务器环境下运行,以防止插件(html2canvas)出错,这里使用的服务器环境为phpStudy,为本地服务器环境。有关本地服务器有哪些以及下载使用,可自行网上查阅

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JS实现图片合成下载</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><!--加载jquery ui主要作用是使用其拖拽的功能--> 
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script><!--想要图片合成,核心就是加载使用这个插件--> 
<script> 
function BaseImage(imgFile) {//图片1上传的函数方法 
   var f = imgFile.files[0];//获取上传的图片文件 
   var filereader = new FileReader();//新建一个图片对象 
  filereader.onload = function (event) {//图片加载完成后执行的函数 
      var srcpath = event.target.result;//这里获取图片的路径(图片会被转为base6格式) 
      $("#baseimg").attr("src",srcpath);//将获取的图片使用jquery的attr()方法插入到id为baseimg的图片元素里 
   }; 
   filereader.readAsDataURL(f);//读取图片(将插入的图片读取显示出来) 
 } 
 
function StyleImage(imgFile) { //图片2上传的函数方法(原理同上) 
   var f = imgFile.files[0]; 
  var filereader = new FileReader(); 
   filereader.onload = function (event) { 
      var srcpath = event.target.result; 
      $("#styleimg").attr("src",srcpath); 
  }; 
    filereader.readAsDataURL(f); 
 }  
 
$(function() { 
    $( ".drg" ).draggable();//这里使用jquery ui的拖拽方法  draggable();作用是可以让图片2进行拖拽 
}); 
 
function down(){//这个函数是点击下载执行的方法 
   html2canvas($(".whole"),{ //这是使用了html2canvas这个插件的方法,将class为whole的整个节点绘制成画布 
     onrendered:function(canvas){  //画布绘制完成后执行下面内容,function内的canvas这个参数就是已经被绘制成画布 
          var link = document.createElement('a');//创建一个a标签 
          link.download = 'my-image-name.jpg';//a标签增加一个download属性,属性值(my-image-name.jpg)就是合成下载后的文件名 
          link.href = canvas.toDataURL();//canvas.toDataURL()就是画布的路径,将路径赋给a标签的href 
          link.click();//模拟a标签被点击,这样就可以下载了 
     }, 
  }) 
} 
</script> 
</head> 
<body> 
 
<fieldset> 
 <input type="file"  onchange="BaseImage(this)" > 
<legend>上传图1</legend> 
</fieldset> 
<fieldset> 
<input  type="file"  onchange="StyleImage(this)" > 
 <legend>上传图2</legend> 
</fieldset> 
<fieldset> 
 <button onclick="down()" >点击合成下载</button> 
</fieldset> 
 
<span class="whole" style="width: 544px;display: inline-block;position: relative;"> 
<img id="baseimg"  style="width:100%;height:auto;"  > 
<div style="height: 100%;width: 100%;top:0;position: absolute;overflow: hidden;"> 
<div class="drg" style="position: absolute;width:100px;top: 0px;left: 0px;display: inline-block;"> 
<img id="styleimg"  style="width:100%;cursor: pointer;" > 
</div> 
</div> 
</span> 
 
</body> 
</html>

以上就是JavaScript实现图片合成下载的示例的详细内容,更多关于JavaScript 图片合成下载的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
Angular2数据绑定详解
Apr 18 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
微信小程序实现点击导航条切换页面
Nov 19 #Javascript
详解Vue的mixin策略
Nov 19 #Vue.js
微信小程序自定义底部弹出框功能
Nov 18 #Javascript
微信小程序实现底部弹出框
Nov 18 #Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 #Javascript
You might like
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
utf8的编码算法 转载
2006/12/27 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python生成任意频率正弦波方式
2020/02/25 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
求职自荐书范文
2013/12/04 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
党员违纪检讨书
2014/02/18 职场文书
运动会100米加油稿
2015/07/21 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python