国庆节怎么少得了国旗：国旗头像

前言

突然朋友圈里朋友的头像都是这样的，不慌，我们自己也能做

原理说明

就是将半透明的国旗图片叠加到我们的正常头像上。这里给大家简单的科普一下怎么用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 οnclick="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站搜索“我们一起学前端”