精华内容
下载资源
问答
  • 如何剪切圆形图片
    2015-12-17 17:31:16

    使用Quartz2D来绘制图形

    +(UIImage*) circleImage:(UIImage*) image withParam:(CGFloat) inset {

    UIGraphicsBeginImageContext(image.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 40);
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    CGRect rect = CGRectMake(inset, inset, image.size.width - inset * 2.0f, image.size.height - inset * 2.0f);
    CGContextAddEllipseInRect(context, rect);
    CGContextClip(context);
    
    [image drawInRect:rect];
    CGContextAddEllipseInRect(context, rect);
    CGContextStrokePath(context);
    UIImage *newimg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newimg;
    

    }

    通过

    更多相关内容
  • 在图像中剪切圆形图片

    千次阅读 2020-12-28 22:21:41
    在前端开发中,我们经常需要使用到圆形的图片,下面的在线工具可以帮助我们快速得到圆形图片。 在线工具:https://crop-circle.imageonline.co/cn/, 当然了,这个在线工具还有很多其它功能,有兴趣的可以进一步...

    在前端开发中,我们经常需要使用到圆形的图片,下面的在线工具可以帮助我们快速得到圆形图片。

    在线工具: https://crop-circle.imageonline.co/cn/当然了,这个在线工具还有很多其它功能,有兴趣的可以进一步研究。

    该在线工具可以从方形图片中,截取圆形部分。选择图中的“在图像中剪切圆圈”

    右侧是剪切出来的圆圈,我们可以下载使用它。

    展开全文
  • 用CSS剪切圆形图片在这个教程,我们会介绍一下使用CSS技巧来渲染出圆形的元素,主要来实现这个效果的CSS属性是border-radius.尽管对于正方形的图片来实现圆形这个效果是相当简单的,但是对于长方形来说可能需要多一...

    用CSS剪切圆形图片

    在这个教程,我们会介绍一下使用CSS技巧来渲染出圆形的元素,主要来实现这个效果的CSS属性是border-radius.

    尽管对于正方形的图片来实现圆形这个效果是相当简单的,但是对于长方形来说可能需要多一点点工作。

    正方形图片

    一个百分百正方形的img标签要变成圆形的只需要一行CSS代码。这个技巧在正方形图片上使用的最方便。

    HTML

    CSS

    .circular--squareP{

    border-radius:50%;

    }

    通过设置img标签的所有的border-radius属性为正方形宽/高的50%,我们就可以把这个img标签变成圆的。

    长方形图片

    长方形图片会稍微有一点技巧一点。

    去渲染一个圆形,必须以圆形图片为基础

    要解决这个问题,我们可以通过在img标签外面套一层div,然后我们通过将超过这个外层div的img标签的内容给裁掉来实现。具体的话可以通过将外层div的overflow属性设置为hidden。

    为了能够让照片的主题不要被裁掉,我们必须要区别对待水平和垂直方向的图片。

    水平方向的图片

    HTML

    CSS

    .circular--landscape{

    display:inline-block;

    position:relative;

    width:200px;

    height:200px;

    overflow:hidden;

    border-radius:50%;

    }

    .circular--landscape img{

    width:auto;

    height:100%;

    margin-left:-50%;

    }

    高度和宽度属性必须要保持一样来确保这个div(.circular--landscape)能够作为正方形渲染起来

    除此之外,高度和宽度属性必须要等于或者小于img的高度。这能够确保img元素能够占满外层div而不会多出一部分空白

    一般来说,水平方向图片的主题(但不一定)会位于图片的中心位置。为了能够让我们尽量不会把图片的主题裁剪啦,我们可以通过把图片往左移来弥补图片剪切的内容有点偏右的问题。

    我们移动img标签的大小是外层div的25%,在这个例子中就是向左50px,我们可以通过设置margin-left的属性来完成设置

    margin-left:-50px;

    图片的主题会接近图片的水平方向中心的假设并不一定是对的,最好在你选择使用这个技巧的使用把这个假设记住。

    垂直方向的图片

    HTML

    CSS

    .circular--portrait{

    position:relative;

    width:200px;

    height:200px;

    overflow:hidden;

    border-radius:50%;

    }

    .circular--portrait img{

    width:100%;

    height:auto;

    }

    对于垂直方向上的图片的主题在垂直方向的中心的假设当然也不适用于每一个垂直方向上的图片。

    和水平方向的图片类似,外层div的宽度和高度最好等于垂直方向图片你的宽度,这样的话可以产生最好的效果。

    对于垂直方向的图片,我们把宽度设置为100%,高度设置为auto(和水平方向的图片相反)

    我们不需要移动这个img元素,因为这张照片的主题就在上方中心位置。

    回顾

    这个技巧最好适用于正方形的img标签,主题正好位于图片的中心。但是,我们的世界并不是那么完美的,所有如果需求是这样,我们就可以使用div来把长方形img标签变圆。

    CSS中用来负责把图片变圆的属性是border-radius,把边的圆角变成高度/宽度的50%就可以产生一个圆。

    展开全文
  • 从网上看了许多关于头像剪切的资料,通过整理、测试、修复bug,编写了一个头像剪切demo,大家可以借鉴一下。
  • delphi 剪切圆形图片有锯齿,怎么解决? 矩形图片剪切一块圆形的出来,会有严重的锯齿,怎么解决,或者有什么好办法吗?
  • python 实现将多个矩形图片批量裁剪为圆形图片。 裁剪方式为从矩形的正中心截取最大的圆形,即圆形与矩形的宽相切。 支持横置矩形图片和纵置矩形图片。
  • h5图片圆形剪切插件

    2019-02-15 17:49:07
    该插件实现了网页对图片进行圆形剪切,对于网页web或者是手机端页面都能使用
  • 裁剪圆形图片: // 获取图形上下文 CGContextRef context = UIGraphicsGetCurrentContext(); // 设置图片的rect CGRect imageRect = CGRectMake(0, 0, rect.size.width, rect.size.height); // 在rect中画...

    注:旋转、平移、缩放,必须放在画图之前

    平移:

    <span style="font-size:18px;">// 获取上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        // 画一个三角形
        // 定义三个点
        CGPoint point[3] = {{50, 50}, {100, 80}, {10, 80}};
        CGContextAddLines(context, point, 3);
        // 合并路径
        CGContextClosePath(context);
        // 渲染
        CGContextStrokePath(context);
        
    #warning 旋转、平移、缩放,都要放在画图之前
        // 平移
        CGContextTranslateCTM(context, 100, 0);
        
        // 画第二个三角形
        // 定义三个点
        CGPoint points[3] = {{50, 50}, {100, 80}, {10, 80}};
        CGContextAddLines(context, points, 3);
        [[UIColor whiteColor] set];
        // 合并路径
        CGContextClosePath(context);
        
        // 渲染
        CGContextStrokePath(context);
    </span>

    效果:



    旋转:围绕左上角(00)旋转

     // 获取上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        // 画一个三角形
        // 定义三个点
        CGPoint point[3] = {{50, 50}, {100, 80}, {10, 80}};
        CGContextAddLines(context, point, 3);
        // 合并路径
        CGContextClosePath(context);
        // 渲染
        CGContextStrokePath(context);
    
    
        // 旋转
        // 负数:逆时针
        // 围绕左上角(0,0)旋转
        CGContextRotateCTM(context, - M_PI * 0.125);
        
        // 画第二个三角形
        // 定义三个点
        CGPoint points[3] = {{50, 50}, {100, 80}, {10, 80}};
        CGContextAddLines(context, points, 3);
        [[UIColor whiteColor] set];
        // 合并路径
        CGContextClosePath(context);
        
        // 渲染
        CGContextStrokePath(context);
    
    效果:



    缩放:

     // 获取上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        // 画一个三角形
        // 定义三个点
        CGPoint point[3] = {{50, 50}, {100, 80}, {10, 80}};
        CGContextAddLines(context, point, 3);
        // 合并路径
        CGContextClosePath(context);
        // 渲染
        CGContextStrokePath(context);
        
        
        // 缩放
        CGContextScaleCTM(context, 3, 4);
        
        
        // 画第二个三角形
        // 定义三个点
        CGPoint points[3] = {{50, 50}, {100, 80}, {10, 80}};
        CGContextAddLines(context, points, 3);
        [[UIColor whiteColor] set];
        // 合并路径
        CGContextClosePath(context);
        
        // 渲染
        CGContextStrokePath(context);
    
    效果:



    裁剪圆形图片:

        // 获取图形上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        // 设置图片的rect
        CGRect imageRect = CGRectMake(0, 0, rect.size.width, rect.size.height);
        // 在rect中画一个内切圆
        CGContextAddEllipseInRect(context, imageRect);
        // 剪掉圆外面的部分
        CGContextClip(context);
        
        // 只把图片显示在UIView上
        UIImage *image = [UIImage imageNamed:@"papa"];
        [image drawInRect:imageRect];
        
        // 添加一个圆形的边框
        // 设置边框颜色
        [[UIColor blueColor] set];
        // 设置线宽
        CGContextSetLineWidth(context, 5);
        // 画圆
        CGContextAddEllipseInRect(context, imageRect);
        // 渲染
        CGContextStrokePath(context);
    

    效果:






    展开全文
  • 如何把图片裁剪为圆形

    千次阅读 2022-03-17 21:45:26
    使用PPT,轻松把图片裁剪为圆形
  • 在实际开发过程中,会很多时候需要将图片进行处理,例如MP3音乐中显示歌手头像等,代码如下:package com.music;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;...
  • Android裁剪图片为圆形图片Demo
  • 本文实例为大家分享了iOS将图片裁剪成圆形的具体代码,供大家参考,具体内容如下原图:圆形图片裁剪效果:裁剪成带边框的圆形图片:核心代码:#import @interface UIImage (image)/*** 生成一张圆形图片** @param ...
  • 【实例简介】【实例截图】【核心代码】package ...import android.app.Activity;import android.content.DialogInterface;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Handl...
  • js css3制作网页圆形图片光标悬停文字显示效果。适用于一些简洁大气的网站标题内容事件特效。
  • Android头像剪切,解决了上一版剪切结果偏移的问题。这里是Android Studio版,实现过程可到博客http://blog.csdn.net/qmln31821007/article/details/49995657中查看,博客中有Eclipse版demo下载
  • ImageRoundCrop 图片圆形剪切
  • 那么 CSS 如何显示圆形图片呢?我们如何将图片变为圆形呢?这篇文章来告诉你。border-radius 属性border-radius 属性是用来实现圆角技术的,我们上传一张正方形图片后,将它属性值设置为图片尺寸的一半,即可将...
  • 剪切图片圆形,并使边缘透明。 将图片剪切圆形并使边缘透明 效果图: 看起来朦胧的 但是放进面板之后色彩与原图一致 public static void k() { BufferedImage bi1 = null; try { bi1 = ImageIO.read(new...
  • java 图片剪切圆形

    2016-08-23 13:43:00
    做头像使用。 public static void main(String[] args) throws IOException { BufferedImage bi1 = ImageIO.read(new File("C:/Users/Auser/Desktop/111.pn...
  • 详情:http://blog.csdn.net/qq_17299423/article/details/50846717
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #test { box-shadow: 0 0 10px #333;... <...
  • @interfaceUIImage(Resize)//按形状切割图像-(UIImage*)cutImageWithRadius:(int)...@end//图片剪切-(UIImage*)cutImageWithRadius:(int)radius{UIGraphicsBeginImageContext(self.size);CGContextRefgc=UIGraphicsG...
  • 圆形图片剪切 iOS

    2017-02-20 22:03:17
    图片建切成圆形
  • 有两个函数一个缩放一个剪切成圆,都返回一个base64格式的png图片,直接放到image的src标签就可以使用原图缩放剪切成圆过后/***生成图片的缩略图*@param{[type]}img图片(img)对象或地址*@param{[type]}width缩略图宽*@...
  • android图片圆形裁剪框

    2018-02-23 13:52:11
    手机拍照后、选择照片后的圆形裁剪框 demo,简单实用!!
  • PHP将图片剪切圆形

    2021-03-23 11:30:56
    PHP将图片剪切圆形发布时间:2019-01-14 10:43,浏览次数:493, 标签:PHP免费API接口:http://www.wangshuwen.com/portal/article/detail/id/12.html/** * @param string $imgpath 要处理的图片路径 * @return ...
  • 以上就是为大家分享的超酷的jQuery响应式圆形图片轮播图插件miSlider,希望大家可以熟练使用miSlider插件在自己的作品中能灵活运用。 总结 如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。 ...
  • @interfaceUIImage(Resize)//按形状切割图像-(UIImage*)cutImageWithRadius:(int)...@end//图片剪切-(UIImage*)cutImageWithRadius:(int)radius{UIGraphicsBeginImageContext(self.size);CGContextRefgc=UIGraphicsG...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,007
精华内容 2,002
关键字:

如何剪切圆形图片