前言
突然朋友圈里朋友的头像都是这样的，不慌，我们自己也能做
原理说明
就是将半透明的国旗图片叠加到我们的正常头像上。这里给大家简单的科普一下怎么用ps做半透明图片【看演示】
【给图层加上滤镜，然后使用渐变填充就好】
实现
（1）完成html部分
<canvas id="canvas" width="100" height="100"></canvas>
<div class="wrapper">
<div class="img-box">
第一个图片：<img src="" id="imgId1">
<!--获取图片控件--> <input type="file" change="getFile" name="第一个图片" id="fileId1">
</div>
<div class="img-box">
第二个图片：<img src="" id="imgId2">
<!--获取图片控件--> <input type="file" change="getFile" name="第二个图片" id="fileId2">
</div>
</div>
<div> 合成后：<img src="" class="generateImg"> </div>
<button onclick="composePic()">合成</button>
（2）给获取文件组件设置监听
let headImg;
let guoqiImg;
document.getElementById('fileId1').addEventListener('change', function (e) {
headImg = e.target.files[0]
document.getElementById('imgId1').src = URL.createObjectURL(headImg)
})
document.getElementById('fileId2').addEventListener('change', function (e) {
guoqiImg = e.target.files[0]
document.getElementById('imgId2').src = URL.createObjectURL(guoqiImg)
})
（3）使用canvas,完成合成
// 创建 canvas
const canvas = document.querySelector('#canvas')
const ctx = canvas.getContext('2d')
ctx.drawImage(document.getElementById('imgId1'), 0, 0, 100, 100) ctx.drawImage(document.getElementById('imgId2'), 0, 0, 100, 100)
// 显示
document.querySelector('.generateImg').src = canvas.toDataURL("image/png")
更多学习视频学习资料请参考：B站搜索“我们一起学前端”
