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

2020-10-29 09:54:49  阅读 1507 次 评论 0 条

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

这可咋整

算了,用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);



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2109
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?