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();
                img.crossOrigin = ''
                tem.src = img;
                img = tem;
            }
            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('./res/demo.jpg')
        /**
         * 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理
         * @param  {[type]} img 图片(img)对象或地址
         * @return {[type]}     return base64 png图片字符串
         */
        function yuan_image(img) {
            if (typeof img !== 'object') {
                var tem = new Image();
                img.crossOrigin = ''
                tem.src = img;
                img = tem;
            }
            var w, h, _canv, _contex, cli;
            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();
        }