【代码】canvas实现将方形图片处理为圆形

说到海报，里面的用户头像肯定不能是方形的吧，但是呢，图片他都是方形的

这可咋整

算了，用canvas写出一个

对了，还有，如果出现图片不完整的情况，请移步https://www.yangguangdream.com/?id=2108

逻辑代码

 function getCircle(imgss,x,y) {
            var canvas = document.getElementById("tmpCanvas");
           
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布，重新画
            //加载图片
            var img = new Image()
            img.setAttribute("crossOrigin", 'Anonymous');//解决跨域问题
            img.onload = function () {
                var width = x;
                var height = y;
                var circle = {
                    x: width / 2,
                    y: height / 2,
                    r: width / 2
                }
                ctx.clearRect(0, 0, width, height);
                //开始路径画圆,剪切处理
                ctx.save();
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
                ctx.clip(); //剪切路径
                ctx.drawImage(img, 0, 0);
                //恢复状态
                ctx.restore();

                var image = canvas.toDataURL("image/jpg");//返回base64
                console.log("====图片切圆完成====");
                console.log(image);
                console.log("======================");
            }
            img.src = imgss;

        }

调用

getCircle("https://www.yangguangdream.com/zb_users/upload/xcx.jpg",100,100);

微信扫码查看本文