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

28天前   阅读:132   分类:前端    标签: 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>

效果展示:

image.png

【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/450.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇:没有更多了文章

下一篇: TP5搜索分页

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×