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

前言

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

原理说明

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

国庆节怎么少得了国旗：国旗头像相关推荐

北风：在给我一面国旗换头像中，有人通过这个来获利吗？（亲身经历）
这是一篇只有部分人可见的文章,准确点说是只有公众号原始粉丝可见,原因我会在后文说到,由于昨天更换国旗头像事件,幸运的偶获大量粉丝,复盘下这个环节我做什么?我的心理路径是什么样的?以及后续我想怎么做? ...
求大家别秀智商了：请给我一面国旗 @微信官方
loonggg 读完需要 2 分钟速读仅需1分钟还记得 2017年12月23号吗?那天早上: 那天早上醒来,微信朋友圈被 "请给我的头像一顶圣诞帽 @微信官方" 这段文字刷屏了 ...
python画国旗和八卦图
文章目录前言一.国旗二.八卦图总结前言今天继续画图. 一.国旗国旗由五个五角星和一个红色组成. 代码: import turtleturtle.bgcolor("red&quo ...
Python使用Turtle画国旗系列,Python相关方法的梳理和总结
这是一个闲的蛋疼的系列.... 三个特别相近的国旗日本国旗孟加拉国国旗帕劳共和国国旗奥兰群岛旗帜傻傻的让我分不清楚的国旗奥地利国旗亚美尼亚国旗玻利维亚国旗保加利亚国旗国旗 ..... ...
教程丨亿万网友一起换头像欢庆新中国成立70周年，就差你了！
全世界只有3.14 % 的人关注了青少年数学之旅眼看着2019年国庆节马上要到了大街小巷都挂起来显眼的国旗而今天早上朋友圈更是被"国旗"刷屏一打开朋友圈满屏的国旗微信 ...
国庆头像html代码
每年国庆节都会发现自己的好友头像加特效了,其实这种网站代码很简单,就是一个html单页替换下头像框就可以了. <html lang="en"> <head> ...
国庆来临，外贸人出货必须注意的几个点(附节日营销技巧）
国庆即将来临,节前还是节后出货呢?如果你的单证能保证完成,是可以国庆前出货的,但国庆前出货拖车比较紧张,要提前订舱并联系好拖车.一定要量力而行,跟客户坦诚说明情况,必须把发货前工作基础做扎实. 遇到节 ...
写个微信小程序过中秋
文章目录项目展示技术栈核心代码项目地址七月七日鹊桥断,八月十五月儿圆.日暖秋凉菩提院,月儿无限月长圆.转眼间,今年的中秋又要到啦,想到去年很火的"国旗渐变头像"微信小程序 ...
实用的微信小程序「值得推荐」
前言我们正在享受小程序带来的便捷,但又折磨着我们,小程序已经有几百万个,参差不齐,挑选就是一个难题:我是个小程序爱好者,但只喜欢体验好,实用性强的微信小程序,今天就来安利几款我使用了很久的小程序懒 ...
使用turtle绘制疫情加油图案
turtle这个库被介绍为一个最常用的用来给孩子们介绍编程知识的方法库,其主要是用于程序设计入门,是标准库之一,官方文档如下,利用turtle可以制作很多复杂的绘图,本文简单绘制疫情期间为武汉加油的图 ...

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

国庆节怎么少得了国旗：国旗头像相关推荐

最新文章

热门文章