js canvas如何实现圆角图片头像

2020-09-28 阅读：2620 分类：前端标签： canvas

最近在做中秋国庆海报，在获取用户微信头像的时候，发现设计稿用的是圆形头像，百度找了一些，整合了自己的代码，分享给大家，供大家参考。

html部分代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海报</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<style>
.app{ width: 100%;max-width: 750px; height: auto; top: 0; bottom:0;position:fixed;overflow-y:scroll;overflow-x:hidden;z-index: 222; background: #fff; display: none }
.app img{margin-top: 0.5rem; width: 96%; height: auto;}
</style>
<div id="app"></div>
</body>
</html>

js代码：

<script>
	let canvas = document.createElement('canvas')
        canvas.width = "1024" //创建画布，并设置宽高
        canvas.height = "1372"  //创建画布，并设置宽高
        let ctx = canvas.getContext("2d")
        let wx_img = './tx.jpg';  //用户头像
    	var bgImg = './bg.jpg'; //背景图片
        loadImg([
            bgImg,
            wx_img,
        ]).then(([img1, img2])=> {
                ctx.drawImage(img1, 0, 0, 608, 1080) //画布上先绘制背景图`
                drawRoundRect(ctx,100,268,549, 72,72,img2);  //绘制头像
            imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式，图片质量，详自查API`
            let img3 = new Image()
            $('#app').fadeIn();
            document.getElementsByClassName("app")[0].append(img3)
            img3.src = imageURL
            canvas.style.display = "none"
        });
// 画圆形头像方法
// 对象 - 半径  - x轴距离 一y轴距离  -头像宽度 - 头像高度 -图片地址
 function drawRoundRect (ctx,r,x,y,w,h,img) {
    ctx.save()
    if (w < 2 * r) r = w / 2
    if (h < 2 * r) r = h / 2
    ctx.beginPath()
    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.closePath();
    ctx.clip()
    ctx.drawImage(img, x, y, w, h)
    ctx.restore() // 返回上一状态

}
//判断图片是否加载成功
function loadImg(src) {
    let paths = Array.isArray(src) ? src : [src]
    let promise = paths.map((path) => {
        return new Promise((resolve, reject) => {
            let img = new Image()
            img.setAttribute("crossOrigin", 'anonymous')
            img.src = path
            //只是更新了DOM对象,图片数据信息还未加载完成，加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源
            img.onload = () => {
                resolve(img)
            }
            img.onerror = (err) => {
                alert('图片加载失败')
            }
        })
      })
      return Promise.all(promise)
}


</script>

效果展示：