html将图片裁剪成圆形,zrender将一张图片裁剪为圆形

前言

我们都知道css将一张图片变成圆角图片很容易，通过border-radius就可以实现，

但是canvas上面就有点麻烦了，原生的写法传送门不做探讨，

咱们这次主要讲讲利用强大的绘图引擎zrender来实现

开始

本文zrender版本号：

image.png

首先我们先绘制一张图片

image.png

然后咱们利用setClipPath对图片进行裁剪

image.png

代码

#main {

width: 400px;

height: 400px;

background: black;

}

console.log(zrender);

var zr = zrender.init(document.getElementById('main'));

var img = new zrender.Image({

style: {

image:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2172656580,259017371&fm=27&gp=0.jpg',

x:100,

y:100,

width:200,

height:200

}

});

var clipPath = new zrender.Circle({

shape: {

cx: 200,

cy: 200,

r: 80

}

});

img.setClipPath(clipPath);

zr.add(img);

html将图片裁剪成圆形,zrender将一张图片裁剪为圆形相关推荐

python　将图片切割成固定大小的图片脚本
将像素很大的图片切割成固定大小的多张图片,代码如下: import numpy as np import matplotlib import os from PIL import Imagedef i ...
ios 将矩形图片裁剪成圆形图片
在ios中将一个正方形的图片裁剪成圆形的图片是一件非常容易的事情, 直接设置 imageView.layer.cornerRadius 这个属性, 再设置 imageView.clipsToBound ...
调用系统相机和相册，并且裁剪成圆形图片(解决6.0，7.0，8.0版本问题)
之前写过一篇博客,那篇博客对7.0手机裁剪图片的问题没有进行解决,现在对之前的那篇博客进行补充,解决了Android6.0,7.0,8.0版本问题,不仅可以调用相册,相机,还可以将图片保存到本地,并且 ...
如何把一个图片裁剪成圆形
1.有的时候,为了工作的需要,需要吧图片裁剪成圆形.我们一般有两种思路:让承载image的ImageView变成圆形,或者把图片变成圆形. A:通过image的mask 来操作.需要添加mask目标图 ...
iOS 把图片裁剪成圆形
原图: 圆形图片裁剪效果: 裁剪成带边框的圆形图片: 核心代码: #import <UIKit/UIKit.h>@interface UIImage (image)/*** 生成一张圆形图 ...
android 圆形裁剪,Android中将图片裁剪成圆形的方法
直接上代码吧,如果需要拍照或者从相册中选择图片的功能,推荐一个开源库,用起来很方便 http://www.jianshu.com/p/35ce3b82773e //裁剪图片的第三方库http://ww ...
php方行图片裁剪为圆形,如何将图片裁成圆形、矩形……各种形状？
做简历的头像.PPT中的图片--经常会想要让图片变成圆形,或对图片进行下裁剪,去掉多余部分,让图片更完美.创客贴有三种方式. 01. 图片吸附框平台上提供的特色素材之一,可以在设计页左侧的" ...
WPF 中使用附加属性，将任意 UI 元素或控件裁剪成圆形（椭圆）
原文:WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆) 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布,但务必保 ...
中如何将方形图片转换成圆形图片_【PS】PS中不可不知的实用技巧！你都掌握了吗？...
今天给大家分享一些在PS中经常用到的实用小技巧,操作简单易上手. 01 拉伸图片人物不变形在我们在PS里想要拉伸一些图片时,里面的人物往往会跟着一起变形,那么如何改变图片比例的同时,又不影响人物的形 ...
将图片处理成圆形_设计基本功！图片处理技巧
图片是平面设计中说服力很强的元素之一,它的真实性.直观的效果能够让观众产生浓厚的兴趣.一幅精致的图片,无论是形式还是内容都要具有一定的视觉冲击力和视觉感染力,才能够吸引观众的注意力. 适当修剪图片裁剪 ...

html将图片裁剪成圆形,zrender将一张图片裁剪为圆形

html将图片裁剪成圆形,zrender将一张图片裁剪为圆形相关推荐

最新文章

热门文章