canvas应用——圆角矩形图片

本是古典何须时尚 2022-05-23 07:37 271阅读 0赞

前段时间写了一个[canvas应用——将方形图片处理为圆形][canvas] ，最近就想把这个完善一下，所以就再补充一个canvas的圆角矩形处理方式。

## 例子 ##

你可以直接点击此处查看 [例子][Link 1] ，先一睹为快。

## 参数 ##

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>img</td> 
   <td>null</td> 
   <td>图片(img)对象</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>0，number类型</td> 
   <td>设置生成图片的大小：0设置生成的图片大小是以图片设置的css大小为准，1设置生成的图片大小是以图片分辨率为准</td> 
  </tr> 
  <tr> 
   <td>radius</td> 
   <td>0，number类型</td> 
   <td>圆角矩形的圆角半径</td> 
  </tr> 
 </tbody> 
</table>

## 代码 ##

/** * 把图片处理成圆角矩形 * @param {object} img 图片(img)对象 * @param {number} type 设置生成图片的大小：0设置生成的图片大小是以图片设置的css大小为准，1设置生成的图片大小是以图片分辨率为准，默认值为0 * @param {number} radius 圆角矩形的半径，默认值为0 * @return {string} return base64 png图片字符串 */
    function circleRect_image(option) {
        var img = option.img;
        var type = option.type || 0;
        var radius = option.radius || 0;
        var imgSize, canvas, ctx;
        if (type){
            imgSize = {
                width: img.naturalWidth,
                height: img.naturalHeight
            }
        }else{
            imgSize = {
                width: img.width,
                height: img.height
            }
        }
        canvas = document.createElement('canvas');
        if (!canvas.getContext) { // 判断浏览器是否支持canvas，如果不支持在此处做相应的提示
            console.log('您的浏览器版本过低，暂不支持。');
            return false;
        }
        canvas.width = imgSize.width;
        canvas.height = imgSize.height;
        ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, imgSize.width, imgSize.height);
        ctx.save();
        ctx.beginPath();
        roundedRect(ctx, 0, 0, imgSize.width, imgSize.height, radius);
        ctx.clip();  // 通过裁剪得到圆角矩形 
        if(type){
            ctx.drawImage(img, 0, 0, imgSize.width, imgSize.height, 0, 0, imgSize.width, imgSize.height);        
        }else{
            ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, imgSize.width, imgSize.height);
        }
        ctx.restore();
    
        // 画圆角矩形
        function roundedRect(ctx, x, y, width, height, radius) {
            ctx.strokeStyle = "#fff";
            ctx.beginPath();
            ctx.moveTo(x, y + radius);
            ctx.lineTo(x, y + height - radius);
            ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
            ctx.lineTo(x + width - radius, y + height);
            ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
            ctx.lineTo(x + width, y + radius);
            ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
            ctx.lineTo(x + radius, y);
            ctx.quadraticCurveTo(x, y, x, y + radius);
            ctx.stroke();
        }
        return canvas.toDataURL('image/png');
    }

[canvas]: https://blog.csdn.net/fxss5201/article/details/79691923
[Link 1]: http://www.fxss5201.cn/project/html/canvas/circleRectImg/