JavaScript实现图片合成下载小白帮助_下载小白攻略

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

JavaScript实现图片合成下载小白帮助

最近项目一个功能需求,需实现将两张图片合成后下载的一个功能。分析完功能需求后,决定直接使用前端技术来实现。为提高效率,使用插件(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>
海计划公众号
(0)
上一篇 2020/03/20 07:33
下一篇 2020/03/20 07:33

您可能感兴趣的内容

  • 微服务架构之「 调用链监控 」入门攻略_微服务小白知识

    「 调用链监控 」是在微服务兴起后才有的一种新流行的监控模式。因为在我们传统单体应用的项目中,不存在服务链/调用链的概念,所以也就根本没有调用链监控的需求了。当我们开始微服务架构之后,我们的很多服务变成分布式的了,并且我们对服务进行了拆分,拆分之后,用户的一个请求进来,会依次经过不同的服务节点进行处理,处理完成后再返回结果给用户。那么在整个处理的链条中,如果

    2020/03/30
  • Vue路由的配置指南教程_配置指南攻略

    什么是路由vue路由是可以通过组件的形式把所有的组件组装成为一个应用程序,当我们需要的时候,将这个组件映射到路由,然后告诉Vue 我们在哪里渲染它们。路由是我们浏览器的一个地址。vue路由的优缺点当我们加载一个程序时,由于它加载的内容特别多,所以会比较缓慢,但是我们加载完之后,我们到页面里进行切换,它的切换速度会变得特别快。原因是因为我们将所有的程序都放在一

    2020/03/24
  • form 表单中 disabled 属性的元素不参与表单提交菜鸟攻略_表单基础入门

    全局安装npm install -g vuepress 或者 yarn global add vuepress新建一个文件夹 (例如 my-vuepress-test)mkdir my-vuepress-test (新建文件夹)cd my my-vuepress-test (切换至my-vuepress-test文件夹下)npm init -y (-y

    2020/03/26
  • Web认证攻略教程介绍Web开发中几种常用的认证机制_web指南教程

    如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制及优缺点。 HTTP基本认证(HTTP Basic Auth) 在HTTP中,HTTP基本认证是一种允许Web浏览器或者其他客户端在请求时提供用户名和口令形式

    2020/04/03
  • input type=file 上传文件,同一个文件第二次上传无反应基础指南_文件小白常识

    用input file上传文件,掉用onchange方法时,多次上传同一个文件时功能失效,不会发送ajax请求input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value

    2020/03/26
  • h5通过连接打开本地app小白攻略以及常见应用的URL Scheme_h5小白知识

    在做h5活动页面的时候,有这样的一个需求:点击页面的一个按钮就打开本地的一个app应用,如果该应用未下载,则跳转到app的下载页。这个操作是通过连接跳转的形式来实现的,这篇文章就简单讲解下如何操作的?h5跳转链接: 唤起应用 说明:scheme (唤起协议)和hos

    2020/04/05
  • HTML/CSS中的空格处理小白攻略如何保留页面中的空格_css小白入门

    HTML中的空格的规则在html中内容中的多个空格一般会被视为一个,连续的多个空格符被自动合并了。同时内容前后的空格也会被清除, 如下:

    fly63 com

    显示效果为:fly63 com备注:浏览器的这种机制处理,同样适用于除了普通的空格键,还包括制表符(\t)和换行符(\r和\n),可以通过使用
    标签显式表示换行。 HTML空格保

    2020/04/05
  • a标签调用js的几种方法教程视频_标签小白帮助

    a标签点击事件方法汇总 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。这里的href=”javascript:;”,其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascrip

    2020/03/24
  • 7个带陷阱的js面试题入门百科_面试基础知识

    在 JS 面试中,经常会看到一些简单而又沙雕的题目,这些题目包含一些陷阱,但这些在我们规范的编码下或者业务中基本不会出现。 有些面试官就是这样,不专注于制定代码的标准和规范上,却用不规范的代码去检验别人是否细心。这魔幻的世界就是一个攀比优越感的,我能考你,我就是比你优越,真实。来看看这 7 个沙雕题目是哪些。1. 偶然创建的全局变量面试官问在下面的代码中 t

    2020/03/24
  • r2新手入门_一款基于浏览器 Fetch API 的 http 客户端

    r2新手入门 GitHub:https://github.com/mikeal/r2 简介描述:一款基于浏览器 Fetch API 的 http 客户端 r2与 request为同…

    2020/03/06
  • JavaScript JSON小白攻略_json攻略教程

    JSON 是存储和传输数据的格式。JSON 经常在数据从服务器发送到网页时使用。什么是 JSON?JSON 指的是 JavaScript Object NotationJSON 是轻量级的数据交换格式JSON 独立于语言 *JSON 是“自描述的”且易于理解* JSON 的语法是来自 JavaScript 对象符号的语法,但 JSON 格式是纯文本。读取和生

    2020/03/23
  • html元素间的边距重叠问题与BFC使用攻略_元素攻略教程

    一、边距重叠常见情况1、垂直方向上相邻元素的重叠(水平方向上不会发生重叠)2、 垂直方向上父子元素间的重叠二、BFC1、什么是 BFCBFC(Block Formatting Context),即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素2、创建 BFC 的方法(1)设置 overflow 属性,除了 v

    2020/03/26
  • 最新JS正则大全(常用)菜鸟攻略_正则菜鸟指南

    12小时制时间(hh:mm:ss)/^(1[0-2]|0?[1-9]):[0-5]\d:[0-5]\d$/
    base64格式/^\s data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&’,() +;=-._~:@\/?%\s] ?)\s $/i数字/货币金额(支持负

    Web前端 2020/03/29
  • JS检测CSS属性浏览器是否支持的多种方法使用教程_浏览器攻略教程

    一、原生CSS.supports语法返回布尔值 true 或者 false ,用来检测是否支持某CSS属性。语法CSS.supports(propertyName, value);
    CSS.supports(supportCondition);参数propertyName字符串。用来检测的CSS属性名。value字符串。用来检测的CSS属性值。support

    2020/03/23
  • jQuery 效率提升建议菜鸟攻略_效率作者: 大虫小白教程

    jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效。网上有一篇文章转载比较泛滥,已经不知道原文作者了,里面针对jQuery效率提升建议非常科学,现在重新组织里面的内容并转载。1.使用最新版本的jQueryjQuery的版本更新很快,你应该总是使

    2020/04/06
  • js数组、对象、字符串的遍历小白常识_遍历小白攻略

    数组遍历for –使用变量将数组长度缓存起来,在数组较长时性能优化效果明显for(var i=0,len=arr.length;i<len;i++){console.log("元素:"+arr[i]);
    }
    forEach –ES5语法,对数组的每个元素执行一次提供的函数,不能使用break、returnarr.forEach(function(item

    Web前端 2020/03/30