JavaScript实现图片合成下载的示例
最近项目一个功能需求，需实现将两张图片合成后下载的一个功能。分析完功能需求后，决定直接使用前端技术来实现。为提高效率，使用插件(html2canvas)配合编写此功能。有关插件(html2canvas)的介绍，这里不多说明，大家可自行网上查阅。以下直接附上效果演示图以及完整代码
效果演示：
完整代码：(代码复制可直接使用)
注：最好将代码文件放在服务器环境下运行，以防止插件(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="https://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 图片合成下载的资料请关注我们其它相关文章！
相关推荐
-
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画.由于需要在服务器端处理,使用就研究使用imagemagick来进行.同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放.合成后进行裁剪吧. 首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影): 安装ImageMagick的过程就不讲了,可以参考官网的安装方法:http://www.imagemagi
-
javascript使用链接跨域下载图片
前言 图片是最常见的静态资源文件,可以从本地.外链获取图片,或者使用base64码展示.而canvas的toDataUrl() API可以将图片转base64码,然后模拟点击事件即可下载图片. 外链下载 在本地或者网站下载外链url图片时涉及到跨域,跨域会暴露自己的隐私,浏览器对跨域请求进行了限制,故需要设置crossOrigin为anonymous来允许跨域,浏览器会为这张图片的请求头附带Origin信息,告诉静态资源服务器,请在响应头中附带Access-Control-Allow-Metho
-
Nodejs下使用gm圆形裁剪并合成图片的示例
说到Nodejs下的图片处理可能第一想到就是gm,gm底层可以是GraphicsMagic(其实也是gm的由来),也可以是ImageMagick(其实GraphicsMagic本身也是从ImageMagic分割而来,现在独立了).虽然这两个工具本身都不是js实现,所以需要额外安装,不过此工具非常常见,可能已经预装在linux系统下,而且安装也很方便,所以不用因为看到是"第三方"就放弃.虽然说这两个软件都只是底层,无需关心,可笔者在实践中发现必须得用GraphicsMagic,所以这里就
-
纯javascript前端实现base64图片下载(兼容IE10+)
背景 在项目开发过程中,经常会有图片导出的需求,尤其是带有图表类的应用,通常需要将图表下载导出. 在chrome等新版浏览器中实现base64图片的下载还是比较容易的: 创建一个a标签 将a标签的href属性赋值为图片的base64编码 指定a标签的download属性,作为下载文件的名称 触发a标签的点击事件 但是这套逻辑在IE下是不行的,这样写会直接报错. 所以IE下需要单独处理,这里IE在处理这种文件的时候给提供了一个单独的方法:window.navigator.msSaveOrOpenB
-
JavaScript图片处理与合成总结
引言 图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求.实际前端业务中,也经常会有很多的项目需要用到图片加工和处理.由于过去一段时间公司的业务需求,让我在这方面积累了一些干货,趁着年后这段时间总结成一系列文章与大家分享,希望能对各位努力中的前端童鞋带来启发和帮助 本系列分成以下4个部分: 基础类型图片处理技术之缩放与裁剪: 基础类型图片处理技术之图片合成: 基础类型图片处理技术之文字合成: 算法类型图片处理技术: 文章中,我会提到很多在实际实践中所遇到的坑或者经验,应该算是干
-
js canvas实现二维码和图片合成的海报
本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下 思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上.把名字画到画布上.把整张画布转为图片. 一.定义画布和合成海报的img <style type="text/css"> #canbox { width: 100%
-
JavaScript如何实现图片处理与合成
引言: 图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求.实际前端业务中,也经常会有很多的项目需要用到 图片加工和处理. 首先,我这里将前端图片处理暂且分成两种类型:基础类型 与 算法类型: 基础类型的图片处理技术: 图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片.例如常用的贴纸功能: 算法类型的图片处理: 这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点
-
js canvas实现5张图片合成一张图片
本文具体要实现的效果类似下面这张图片,主题流程大概是,页面上有类似这样布局的结构,点击中间那个紫色的按钮就会生成一张这样的图片,并且能够让用户下载图片的 1.首先我们布局页面的时候用的都是图片来布局成这个样子[CSS自己脑补],class为pho-bg这一段是页面开始显示的结构,几张图片定位,按钮在中间的样子.class为photo的就是用来到时候放置生成的图片.canvas就是画布.至于下面的两张图片其实就是按钮的图片和背景图,到时候一并加入画布里面[不过在页面的时候不显示] <div cla
-
js实现GIF图片的分解和合成
无意中看到一篇文章写得是关于纯前端处理GIF图片的问题,感觉挺有意思的所以自己也实现了一下: 主要用到的有两个第三方库:合成GIF图片的gif.js和分解的libgif.js; 分解GIF 1. 引入Git库 import SuperGif from './libgif.js' 2. 处理图片 var file = e.target.files[0]; console.log(file.type.indexOf('image/gif')); load_gif(file); function lo
-
JS端基于download.js实现图片、视频时直接下载而不是打开预览
项目中的附件列表,通常情况都需要提供下载.删除的功能,功能本身没有什么要说的,都是基本功能,使用浏览器的的下载功能,也都是用window.open(url),或者window.location.href=url的方式,url即为附件下载接口,浏览器自动解析,如果是图片.视频.txt等格式的会直接预览文件,而不是像docx.xlsx一样直接下载,项目中为了功能明确,将预览单独加了一个查看按钮,下载按钮要实现无论什么文件格式都直接下载. 有两种方式处理: 一.后台接口层面处理:(比较常见) 响应头中