前言
前几天大家都在朋友圈@微信官方，求赐一面国旗，没有得到微信官方的小盆友们，有没有很失落呀~心血来潮的我，决定用js来写一个给头像加国旗的功能，然后我就送了自己一面国旗，事实证明，想要的东西还是只能靠自己的双手去创造。哈哈哈，这鸡汤洒的触不及防~，回归正题，下面就一起来看看我是怎么实现的吧~~
实现过程
理清思路
其实给头像加国旗的实现原理很简单，就是拿到你的图片资源（就是你的头像），用canvas绘制该图片，然后在图片的右下角再绘制一个小国旗，这样基础的功能就实现了。下面我们来一步步实现给头像加国旗的功能。源码地址
应评论区需求,我这里贴一个代码处理后的头像的效果图(图像是有一个白色圆角边框的,可能会与博客的白色背景重叠,审美不太好,凑合看哈~).
我把我开发该功能的整个思考流程梳理如下：
- 创建input标签，定义onchange事件，读取图片资源，拿到头像的base64编码；
- 创建canvas标签，网上找一个国旗的图片，同样拿到该图片的base64编码，依次使用canvas的drawImage api把头像和国旗绘制在特定位置。
- 直角的头像和国旗太生硬，于是写了个方法给头像和国旗加了一个白色的圆角边框。
- 写死画布的高度会导致图片被拉伸，所以我希望固定画布的宽度，画布的高度根据图片资深的宽高比，和已知的宽度，把按比例计算出来的高度设置为画布的高度。因为国旗的绘制区域是相对于画布的右下角的位置，所以需要在画布高度确定之后（也就是头像绘制完成之后）再进行绘制。
- 把canvas绘制好的图片下载，编写下载图片的逻辑。
开始编码
html代码：
<div>
<div><button class="input-container">
上传头像
<input accept="image/gif,image/jpeg,image/png"
class="file-input" id="fileInput" type="file" />
</button>
<button class="save-btn" onclick="downLoad()">保存图片</button>
</div>
<canvas id="canvas" class="canvas"></canvas>
</div>
js代码:
// 这一过程是定义一些可配置的参数，以便根据需要做修改
const options = {
avatarImgX: 0, // 头像开始剪切的x坐标
avatarImgY: 0, // 头像开始剪切的y坐标
avatarX: 10, // 画布上头像开始绘制的x坐标
avatarY: 10, // 画布上头像开始绘制的y坐标
avatarWidth: 200, // 画布上要绘制的头像的宽度
avatarHeight: 200, // 画布上要绘制的头像的宽度
radius: 5, // 头像的圆角半径
guoqiRadius: 3, // 国旗的圆角半径
guoqiX: 0, // 国旗开始剪切的x坐标
guoqiY: 0, // 国旗开始剪切的y坐标
guoqiWidth: 50, // 画布上要绘制的国旗的宽度
guoqiHeight: 33, // 画布上要绘制的国旗的宽度
// 存放的是国旗的base64编码，源码地址点开可查看完整的
guoqi: ""
}
// 定义一些常量
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const inputUpload = document.getElementById('fileInput');
// 定义input的onchange事件，通过fileReader拿到图片的base64编码
window.onload = function() {
inputUpload.onchange = function uploadAvatar() {
const file = this.files[0];
if(file) {
// 读取图片资源
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function () {
// 为了保证图片不失真，画布的高度是根据上传头像的宽高比
// 和options中定义好的绘制宽度计算出来的，
// 所以需要把国旗的绘制放在头像绘制完成后的回调函数中执行。
function cb() {
const param = {
sx: options.guoqiX,
sy: options.guoqiY,
x: canvas.width - options.guoqiWidth - options.radius * 2,
y: canvas.height - options.guoqiHeight - options.radius * 2,
width: options.guoqiWidth,
height: options.guoqiHeight
}
// 调用绘制图片的工具函数，传入所需参数
drawAvatar(options.guoqi,cb, param.sx,param.sy,param.x,param.y,
param.width,param.height, options.guoqiRadius)
}
// 调用绘制图片的工具函数，传入所需参数
drawAvatar(this.result,cb,options.avatarImgX,options.avatarImgY,
options.avatarX,options.avatarY,options.avatarWidth,
options.avatarHeight);
}
}
};
}
// 绘制图片
function drawAvatar(imgSrc,cb, ...args) {
let img = new Image();
img.src = imgSrc;
// 很多情况下的图片绘制的逻辑都会写在onload里面
// 是因为通常的图片资源都是网络请求获取的，
// 我们会要保证在资源加载完成后才能正确完成绘制。
// 我这里是直接使用的图片的base64编码，
// 绘制图片的逻辑也可不写在onload函数里
img.onload = function () {
args.splice(2, 0, img.width,img.height);
// 绘制的是头像，则计算并设置画布的高度，清空input的值
if(args[6] === options.avatarWidth) {
args[7] = parseInt(args[6] / (img.width / img.height));
canvas.width = args[6] + 20;
canvas.height = args[7] + 20;
inputUpload.value = '';
}
const r = args[8] || options.radius, x = args[4],
y = args[5], w = args[6], h=args[7];
ctx.drawImage(img, ...args);
// 绘制图像的圆角的函数
drawRadius(x, y, w, h, r);
// 绘制国旗
typeof cb === 'function' && cb();
}
}
// 绘制图片圆角
function drawRadius(x,y,w,h,r) {
ctx.beginPath();
ctx.strokeStyle='white';
ctx.fillStyle ='white'
ctx.lineWidth= r;
console.log(ctx.lineWidth);
ctx.moveTo(x+r, y);
ctx.arcTo(x+w, y, x+w, y+h, r);
ctx.arcTo(x+w, y+h, x, y+h, r);
ctx.arcTo(x, y+h, x, y, r);
ctx.arcTo(x, y, x+w, y, r);
ctx.stroke();
ctx.closePath();
}
// 图片下载，下载的原理就是创建a标签，指向图片的下载地址，
// 模拟触发a标签的点击完成下载
function downLoad(url){
let oA = document.createElement("a");
oA.download = 'avatar';
// 通过canvas.toDataURL方法生成图片的下载地址
oA.href = saveAsPNG();
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
// 保存成png格式的图片，你这里可以选择其他格式的图片保存
function saveAsPNG() {
return canvas.toDataURL("image/png");
}
css代码：
.save-btn, .input-container{
border: none;
box-shadow: none;
width: 150px;
padding: 10px;
margin-bottom: 20px;
margin-right: 20px;
text-align: center;
color: #fff;
background-color: blue;
border-radius: 5px;
cursor: pointer;
}
.save-btn {
background-color: #67c23a;
}
.input-container {
background-color: #409eff;
position: relative;
.file-input {
cursor: pointer;
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
}
总结
到这儿，给头像添加国旗的功能就完成了，不知道你们有没有学会呢？代码写到这里其实还有很多待完善的地方，例如国旗的素材，我选的这个国旗图片很规矩，没有太多的设计感，还可以利用canvas的其他api，让生成的图片更有趣，更好看，更自然。我今天的分享就到这儿了，有什么疑惑或者建议可评论区留言给我奥~~，最后，祝我们的祖国生日快乐~，国泰民安，繁荣富强，这盛世，如你所愿！
