使用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.length
var u8arr = new Uint8Array(n);
while (n--) {
u8arr
= 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>

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

欢迎多多指教。