使用canvas来实现两张图片合成一张

写在开头：

最近遇到一个需求，就是上传一张图片，原来的图片作为底图，两张图片组合在一起，形成一张新的图片。并能点击另存。

网上各种百度，谷歌。有很多方法。然后在我的需求里面都不是很适用。就结合前人的成果，自己又重新写了一套。

前端菜鸟一个，进了前端的坑之后才知道，前端的东西真的是太多了。

谨以此篇博客，告诫自己，要以虚心态度继续学习，不断学习才行。

这篇博客会持续更新，在使用过程中还有着新问题的出现。

主要思路：

前端实现图片处理，主要就是通过canvas来实现的。先用canvas

废话不多说，直接上代码。

html代码，选择用input方式是为了防止图片跨域，没有写什么样式，纯原生的。

    第一张图片：<input type="file" name="file" id="change" >第二张图片：<input type="file" name="file2" id="change2"><canvas id="myCanvas" width="400" height="260"></canvas><button id="btn">生成图片</button><a href="" id="download" download="测试图片.png">点我下载</a>

js代码，就是通过canvas来实现，先画一张图片，作为底图，再画一张图片再那张图的上面，代码如下：

    <script>var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var btn = document.getElementById('btn')var change = document.getElementById('change')var change2 = document.getElementById('change2')var download = document.getElementById('download')var img1 = new Image()var img2 = new Image()//处理跨域img1.crossOrigin = 'anonymous'img2.crossOrigin = 'anonymous'change.onchange = function(event){var file = event.target.files[0]var url = window.URL.createObjectURL(file)img1.src = url}change2.onchange = function(event){var file = event.target.files[0]var url = window.URL.createObjectURL(file)img2.src = url}img1.onload = function(){context.drawImage(img1,10,10,400,260)}img2.onload = function(){context.drawImage(img2,20,20,300,240)}btn.onclick = function(){var img =  convertCanvasToImage(canvas)var arr = img.src.split(',')var mime = arr[0].match(/:(.*?);/)[1]var bstr =  atob(arr[1])var n = bstr.lengthvar u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}var blob = new Blob([u8arr],{type:mime})}//下载图片download.onclick = function(blob){var img =  convertCanvasToImage(canvas)download.href = img.src}function convertCanvasToImage(canvas) {var image = new Image();image.src = canvas.toDataURL("image/png");return image;}</script>

只是粗略的实现了基本功能。附上源码。

欢迎多多指教。

使用canvas来实现两张图片合成一张相关推荐

PIL实现两张图片合成一张，和图片加文字
PIL实现两张图片合成一张,和图片加文字文章目录: 一.PIL实现两张图片合成一张 1.方法一: 2.方法二二.图片添加文字首先说明一下: (小姐姐是谁,是my sweetheart ,请勿使用 ...
什么相片可以两张弄成一张_怎么将两张图片合成一张？
有时候我们需要将两张图片放在一起相比较,但是两张图片相互切换对比起来比较困难,有没有什么办法将两张图片合成一张?方法是肯定有的,而且还是多种多样的,本文就给大家介绍一种对普通用户来说最简单方便快捷的方 ...
什么相片可以两张弄成一张_ps怎么把两张图片合成一张
ps怎么把两张图片合成一张图片应用在我们的生活中十分广泛,Photoshop似乎已经离不开我们的生活.点点滴滴回忆刻印成一张张图片.不过有不少网友却不知道ps怎么把两张图片合成一张,下文将一一为大家 ...
如何将两张图片合成一张pdf
在职场工作中,学会处理PDF文件是必不可少的技能.由于PDF文档的特殊性,许多新手在编辑PDF文件时往往不知道从何入手.比如一些非pdf格式的文件,像图片,在使用的时候被指定必须使用pdf格式的,这个 ...
android 两张电信_两张图片合成一张app-2张图片合成一张app下载1.2.9 官方安卓版-西西软件下载...
两张图片合成一张app是一款可以把手机上的2张图片合成一张并且看不出是合成的图片的工具,玩转2张图片叠加,可以让你和偶像合照不是梦很逼真的!带你打造与众不同的作品!可以制作双重曝光效果的APP,带你打 ...
小程序canvan画布，现两张图片合成一张，并保存到本地
微信小程序合成照片应用canvas把他们绘制到一张图上保存到本地相册然后点击分享自定义一个组件 components/canvas.js里 // components/canvas/canvas. ...
实用常识 | 如何将多张图片合成一张gif图片（使用Win10自带工具or利用Photoshop实现）
今天遇到了一个需求,需要将多张图片合成一张gif图片,利用搜索引擎搜来搜去,尝试了很多在线的网页端工具,不过要么是有水印,要么是需付费,而且合成效果也不是很好,找来找去,Win10自带的视频合成工具也 ...
微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...
【Opencv】Python+openCV实现全景图拼接（左右两张图片拼接成一张全景图）
Python+openCV实现全景图拼接(左右两张图片拼接成一张全景图) 全景图拼接思路具体步骤代码与结果代码效果测试1 效果测试2 全景图拼接思路这个就是简单对左右两张图进行拼接,希望 ...

使用canvas来实现两张图片合成一张

写在开头：

主要思路：

使用canvas来实现两张图片合成一张相关推荐

最新文章

热门文章