把图片转换为圆形

生成缩略图

const thumb_image = (img, width, height) => {
    if (typeof img !== 'object') {
        var tem = new Image();
        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();
}

转换圆形

const yuan_image = (img) => {
    if (typeof img !== 'object') {
        var tem = new Image();
        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);
    _contex.restore();
    return _canv.toDataURL();
}