上段時間在專案中需要將方形圖片處理為圓形圖片，你可能會說直接用css設定border-radius: 50%就可以了，但是專案中還要將此圖片的圓形圖片作為一部分利用canvas將其繪製到一張背景圖上面，所以就有了為何要用canvas來處理了。

我們知道 <canvas> 是 HTML5 新增的元素，可用於通過使用JavaScript中的指令碼來繪製圖形。我將本例中的主要處理函式封裝為一個方法，可以直接使用。

關於版本更新導致的引數更改詳情可檢視 此處 。

例子

你可以直接點選此處檢視 例子 ，先一睹為快。

更新

以下內容更新於2018-06-05：原型圖片的改良版

引數

程式碼

/**
 * 把圖片處理成圓形,如果不是正方形就按最小邊一半為半徑處理
 * @param  {object} imgObj 圖片(img)物件
 * @param  {number} imgType 設定生成圖片的大小：0設定生成的圖片大小是以圖片設定的css大小為準，1設定生成的圖片大小是以圖片解析度為準，預設值為0
 * @return {string}     return base64 png圖片字串
 */
 

function circle_image_v2(img, imgType) {
    var type = imgType || 0;
    var radius, diameter, canvas, ctx, natural;
    if (type) {
        if (img.naturalWidth > img.naturalHeight) {
            radius = img.naturalHeight / 2;
        } else {
            radius = img.naturalWidth / 2;
        }
    } else
 
 {
        if (img.width > img.height) {
            radius = img.height / 2;
        } else {
            radius = img.width / 2;
        }
        if (img.naturalWidth > img.naturalHeight) {
            natural = img.naturalHeight;
        } else {
            natural = img.naturalWidth;
        }
    }
    diameter = radius * 2;
    canvas = document.createElement('canvas');
    if (!canvas.getContext) { // 判斷瀏覽器是否支援canvas，如果不支援在此處做相應的提示
        console.log('您的瀏覽器版本過低，暫不支援。');
        return false;
    }
    canvas.width = diameter;
    canvas.height = diameter;
    contex = canvas.getContext("2d");
    contex.clearRect(0, 0, diameter, diameter);
    contex.save();
    contex.beginPath();
    contex.arc(radius, radius, radius, 0, Math.PI * 2, false);
    contex.clip();
    if (type) {
        contex.drawImage(img, 0, 0, diameter, diameter, 0, 0, diameter, diameter);
    } else {
        contex.drawImage(img, 0, 0, natural, natural, 0, 0, diameter, diameter);
    }
    contex.restore();
    return canvas.toDataURL('image/png');
}

以下為舊版內容。

引數

程式碼

/**
 * 把圖片處理成圓形,如果不是正方形就按最小邊一半為半徑處理
 * @param  {[type]} img 圖片(img)物件
 * @param  {[number]} oldImgWidth 原始圖片(img)的實際寬度（非css設定的）
 * @param  {[number]} oldImgHeight 原始圖片(img)的實際高度（非css設定的）
 * @return {[type]}     return base64 png圖片字串
 */
function circle_image(img, oldImgWidth, oldImgHeight) {
    var width, height, canvas, contex, circle;
    if (img.width > img.height) {
        width = img.height;
        height = img.height;
    } else {
        width = img.width;
        height = img.width;
    }
    canvas = document.createElement('canvas');
    if (!canvas.getContext) { // 判斷瀏覽器是否支援canvas，如果不支援在此處做相應的提示
        console.log('您的瀏覽器版本過低，暫不支援。');
        return false;
    }
    canvas.width = width;
    canvas.height = height;
    contex = canvas.getContext("2d");
    circle = {
        x: width / 2,
        y: height / 2,
        r: width / 2
    };
    contex.clearRect(0, 0, width, height);
    contex.save();
    contex.beginPath();
    contex.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
    contex.clip();
    contex.drawImage(img, 0, 0, oldImgWidth, oldImgHeight, 0, 0, width, height);
    contex.restore();
    return canvas.toDataURL('image/png');
}