教你用Canvas将图片截成圆图

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

---

实现

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

应用

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

<img :src="src" alt="">

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)
        
    })
}

---

这样就完成啦 赶紧试试吧