教你用Canvas将图片截成圆图

您所在的位置：网站首页 › 将图片剪切成圆形的方法 › 教你用Canvas将图片截成圆图

教你用Canvas将图片截成圆图

2024-07-11 06:04| 来源: 网络整理| 查看: 265

超能的Canvas又来啦不知道大家会不会碰到要把一张方方正正的图截取成Cute的圆图呢今天来告诉你，怎么化茧成蝶

实现

加载一张可访问的图片，使用Canvas绘制一个圆形画布，将图片在画布范围内进行展示，最后通过Canvas把绘制完成的图转换成可访问的base64编码路径

应用

图片加载需要时间，绘制的过程要在图片加载完成之后，所有我们采用 async await 来保证绘制过程的顺利进行，最终获取我们想要的圆图URL

this.$nextTick( async () => { let picUrl = `${可通过浏览器访问的图片URL}`; this.src = await this.imageToCircle(picUrl) }) 方法： imageToCircle (picUrl) { let radius, diameter, canvas, ctx; let img = new Image() img.setAttribute('crossOrigin','anonymous'); // 解决图片跨域访问失败 img.src = picUrl return new Promise((reslove) => { img.addEventListener("load", () => { let { width, height } = img if (img.width > img.height) { radius = height / 2; } else { radius = width / 2; } diameter = radius * 2; canvas = document.createElement('canvas'); if (!canvas.getContext) { // 判断浏览器是否支持canvas，如果不支持在此处做相应的提示 console.log('您的浏览器版本过低，暂不支持。'); return false; } canvas.width = diameter; canvas.height = diameter; ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, diameter, diameter); // 描边 ctx.save(); //save和restore可以保证样式属性只运用于该段canvas元素 ctx.strokeStyle = 'red'; //设置边线的颜色 ctx.lineWidth = 2; ctx.beginPath(); //开始路径 ctx.arc(radius, radius, radius - 5, 0, Math.PI * 2); //画一个整圆. ctx.stroke(); //绘制边线 // 截圆形图 ctx.save(); ctx.beginPath(); ctx.arc(radius, radius, radius - 5, 0, Math.PI * 2); ctx.clip(); let x = 0, y = 0, swidth = diameter, sheight = diameter ctx.drawImage(img, x, y, swidth, sheight, 0, 0, diameter, diameter); ctx.restore(); // toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码 let dataURL = canvas.toDataURL('image/png'); reslove(dataURL) }, false) }) }

这样就完成啦赶紧试试吧

【本文地址】

教你用Canvas将图片截成圆图

教你用Canvas将图片截成圆图

今日新闻

推荐新闻