fabric photo

发表于2022-02-19|更新于2026-02-24

|浏览量:

这是一个流行离开的世界，但是我们都不擅长告别。——《生活在别处》

今天分享一个fabric photo，它是一个基于 canvas 的纯前端的图片编辑器，支持方形，圆形，箭头，缩放，拖拽，鹰眼，马赛克，涂鸦，线条，导出 png，剪切等

github地址：https://github.com/ximing/fabric-photo

在线体验Demo：https://ximing.github.io/fabric-photo/

找了很多个，这个应该是很好用的了

并且协议为MIT，支持商用

相关推荐

typescript-exercises（六）

请热爱劳动，即使不是靠它吃饭，也可以为了身体的缘故而爱它，它可以增进身心健康，免除怠惰之累。——潘恩题目： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384/*Intro: Filtering requirements have grown. We need to be able to filter any kind of Persons.Exercise: Fix typing for the filterPersons so that it can filter users and return User[] when personType='user' and return Admin[] when personType='admin'...

escape、unescape废弃

爱所有人，信任少数人，不负任何人。——莎士比亚今天看到这个API废弃了，提示使用 encodeURI 或 encodeURIComponent 代替。但是貌似有部分符号并没有转义成功最后在示例看到了解决办法 123456789101112131415161718192021222324252627282930var fileName = 'my file(2).txt';var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName);console.log(header);// 输出 "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"function encodeRFC5987ValueChars (str) &#...

React优化技巧——避免state层级过高

你是非常可爱的人，真应该遇到最好的人，我也希望我就是。——《爱你就像爱生命》今天从Cory House @housecor看到一个优化技巧随笔记一下，希望下次编写时候可以考虑原代码： 123456789101112131415161718192021222324function Product() { const [rating, setRating] = useState(null); return ( <> <h1>Product</h1> <ProductRating rating={rating} setRating={setRating} /> </> );}function ProductRating({ rating, setRating }) { return ( <> <label htmlFor="rating"...

Failed to resolve loader: less-loader

但愿苍生俱饱暖，不辞辛苦出山林。一一于谦本来我今天遇到这个问题了 1Failed to resolve loader: less-loader You may need to install it 我一看：你可能需要安装一下less-loader，我直接输入命令安装 1cnpm i less-loader 执行完毕，再次运行发现报错信息变了： 1TypeError: this.getOptions is not a function 原来是版本太高了，于是卸载 1cnpm uni less-loader 然后安装低版本的 1cnpm i less-loader@6.0.0 再次启动就好了

能轻易做到别人感觉困难的事是人才；能轻易做到别人所不能做的工作是天才。——西德尼讲一个小技巧，对于图片裁剪可以用这个属性：object-fit object-fit 是一个 CSS 属性，用于指定替换元素（如 <img> 和 <video>）内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小，以及是否保持内容的比例例如： 123<div style="width: 400px; height: 400px; overflow: hidden;"> <img src="https://vampireachao.github.io/imgs/head.png" style="width: 100%; height: auto; object-fit: cover; object-position: 0px 0px;transform: scale(1.2);"></div>

不存在十全十美的文章，如同不存在彻头彻尾的绝望。——《且听风吟》我们首先定义一个对象 1234567891011class Person { constructor(name,age) { this.name = name; this.age = age; } toString() { return '(' + this.name + ', ' + this.age + ')'; }};let ruben = new Person("ruben",21);console.log(ruben.toString()) 打印结果为： 1(ruben,21) 我们可以使用Person.prototype去获取Person的原型对象，从而更改类其中的方法 1234567Person.prototype.toString = function(){ return "Person{&q...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中