图片裁剪-内凹圆形

作者: 曦惜夕 | 来源:发表于2019-03-06 02:29 被阅读68次

最近做了一个好玩的东西,分享给大家。

bendImage.png

有一个需求,就是要把图片两侧裁剪成向内凹的圆形(如图),并且两侧凹处不能遮挡背景。

预览地址:http://www.dyrily.cn/bendImage/

对于这种异形的图片,css貌似有点棘手。于是乎,祭出神器:canvas。

这个需求的难点在于如何让裁剪的圆弧通过固定的点,也就是图片边角。

img2.png

这里用的方法是勾股定理来计算裁剪圆的半径。

/**
 * @param canvas element元素
 * @param option
 *      width       canvas的宽
 *      height      canvas的高
 *      url         裁剪图片的链接
 *      distance    内凹的距离
 */
function bendImage(canvas, option) {
    canvas.width = option.width;
    canvas.height = option.height;
    var ctx = canvas.getContext('2d');
    // 通过勾股定理化简后的表达式
    var radius = (option.distance + Math.pow(option.height, 2) / option.distance / 4) / 2;
    var image;
    if (bendImage.image && bendImage.image.src === option.url) {
        image = bendImage.image;
        draw();
        return;
    }
    image = new Image();
    image.src = option.url;
    image.onload = function () {
        bendImage.image = image;
        draw();
    };

    function draw() {
        ctx.drawImage(image, 0, 0, option.width, option.height);
        ctx.globalCompositeOperation = 'destination-out';
        ctx.arc(option.distance - radius, option.height / 2, radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.arc(option.width + radius - option.distance, option.height / 2, radius, 0, Math.PI * 2);
        ctx.fill();
    }
}

原创文章,转载注明出处,感谢。

相关文章

  • 图片裁剪-内凹圆形

    最近做了一个好玩的东西,分享给大家。 有一个需求,就是要把图片两侧裁剪成向内凹的圆形(如图),并且两侧凹处不能遮挡...

  • 圆形图片裁剪

    一直觉得简书是个充满文学氛围浓厚的平台,后来一些同事和圈友经常问一些技术方面的问题,说我要是把我那本经常用来记录开...

  • 用颜色直接生成image

    附送裁剪圆形图片的方法

  • Quartz2D 绘图

    绘制文字 绘制图片 裁剪圆形图片

  • 通过CALayer和图片裁剪设置圆角

    图片裁剪设置圆角: 1、通过设置和图片同样大小的上下文2、设置圆形裁剪区域(创建圆形路径、把路径设置为裁剪区域ad...

  • 趁早·PPT模拟人生100天 Day 7:工具篇-形状之圆

    本课要点:形状工具中的圆形。 圆形的基础应用: 1-裁剪图片为圆形~拖进一张图片,双击-格式-裁剪下面的箭头-选择...

  • Quartz2D之图片裁切

    图片裁剪 在开发中有的时候是需要裁剪图片的,比如说头像,裁剪成圆形,有的时候还有边框

  • 裁剪圆环图片

    裁剪圆环图片 app的头像很多都是圆形的,所以需要把一张普通的图片刻意裁剪成圆形// 核心代码void CGCon...

  • 图片水印.擦除 图片截屏.........

    画板 图片裁剪 图片擦除 方形图片生产圆形头像 手机截屏 图片水印

  • iOS: 裁剪圆形图片

    1.通过对设置imageView中layer的圆角半径实现圆形图片 2.通过上下文对图片进行裁剪实现圆形图片

网友评论

    本文标题:图片裁剪-内凹圆形

    本文链接:https://www.haomeiwen.com/subject/xqyguqtx.html