最近在做海报,在获取用户微信头像的时候,发现设计稿用的是圆形头像,百度找了一些,整合了自己的代码,分享给大家,供大家参考。
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>