canvas实现圆角图片 （处理原图是长方形或正方形）

        /**
         * 生成图片的缩略图
         * @param  {[type]} img    图片(img)对象或地址
         * @param  {[type]} width  缩略图宽
         * @param  {[type]} height 缩略图高
         * @return {[type]}        return base64 png图片字符串
         */
        function thumb_image(img, width, height) {
            if (typeof img !== 'object') {
                var tem = new Image();
                tem.src = img;
                tem.setAttribute("crossOrigin",'Anonymous')
                img = tem;
            }
            img.onload = function(e) {  
                var _canv = document.createElement('canvas');
                _canv.width = width;
                _canv.height = height;
                _canv.getContext("2d").drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);
                return _canv.toDataURL();
            }
        }
        
        yuan_image('./images/cover.png')
        /**
         * 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理
         * @param  {[type]} img 图片(img)对象或地址
         * @return {[type]}     return base64 png图片字符串
         */
        function yuan_image(img) {
            if (typeof img !== 'object') {
                var tem = new Image()
                tem.src = img
                tem.setAttribute("crossOrigin",'Anonymous')
                img = tem
            }
            var w, h, _canv, _contex, cli
            img.onload = function(e) {  
                console.log(e)
                if (img.width > img.height) {
                    w = img.height
                    h = img.height
                } else {
                    w = img.width
                    h = img.width
                }
                _canv = document.createElement('canvas')
                _canv.width = w
                _canv.height = h
                _contex = _canv.getContext("2d")
                cli = {
                    x: w / 2,
                    y: h / 2,
                    r: w / 2
                }
                _contex.clearRect(0, 0, w, h)
                _contex.save()
                _contex.beginPath()
                _contex.arc(cli.x, cli.y, cli.r, 0, Math.PI * 2, false)
                _contex.clip()
                _contex.drawImage(img, 0, 0)
                console.log(_canv.toDataURL())
                return _canv.toDataURL()
            }
        }

 

转载于:https://www.cnblogs.com/lanshengzhong/p/8991040.html