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，支持商用

相关推荐

贫者因书而富，富者因书而贵。——王安石分享一个JavaScript音频 + 视频 + 屏幕 + 画布(2D+ 3D动画)录制库：WebRTC https://recordrtc.org/ https://github.com/muaz-khan/RecordRTC demo：https://www.webrtc-experiment.com/RecordRTC/simple-demos/ 123456789101112let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});let recorder = new RecordRTCPromisesHandler(stream, { type: 'video'});recorder.startRecording();const sleep = m => new Promise(r => setTimeout(r, m));await slee...

typescript快速入门

在原则产问题上，要坚定如磐石；在兴趣问题上，则要顺应潮流。——美国官方文档：https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html 中文文档：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html 下载VScode：https://visualstudio.microsoft.com/zh-hans/ 安装后打开新建文件选择语言写下代码 1234567function greeter(person) { return "Hello, " + person;}let user = "Jane User";document.body.innerHTML = greeter(user); 顺手安个中文重启后，我们打开控制台然后安装typescript 1cnpm install -g typescript 编译ts文件： 1...

css渐变实现杂色

团结就是力量——毛泽东思路出处：https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/ 这是一个通过css渐变产生的锯齿BUG实现的噪点效果例如我们使用径向渐变画两个圆，这里用的径向渐变函数radial-gradient，其中第一个参数是距离中心点近的渐变样式，第二个是远一些的，每个参数中第一项是颜色，第二项是区域这里的：从中心点进行沿半径进行渐变 123456789101112131415<div class="box"></div><div class="box"></div><style> .box { display: inline-block; width: 300px; aspect-ratio: 1; margin: 10px; border: 2px solid red; background: radial-gradient(#000...

js截取字符串

就和java的substring一样 12//截取字符串前4位（包前不包后）也就是下标为0,1,2,3的这四位str.slice(0,4)

我喜欢我的懦弱，痛苦和难堪也喜欢。喜欢夏天的光照，风的气息，蝉的鸣叫，喜欢这些，喜欢得不得了。——《寻羊冒险记》 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。官网文档：https://dvajs.com/ 简单快速入门后，有一个课堂实战这个实战就是用dvajs 写一个列表，包含删除按钮，点删除按钮后延迟 1 秒执行删除。当然，我也完成了这个简单的Demo： https://gitee.com/VampireAchao/simple-dva.git 并顺手练习了一下并行、竞争等概念还是很有意思的

react hook 生命周期

诚实的生活方式其实是按照自己身体的意愿行事，饿的时候才吃饭，爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》官方文档：https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect 直接上代码： 123456789101112131415161718192021222324252627282930313233343536373839404142'use strict';function LikeButton() { const [liked, setLiked] = React.useState(false) const [count, setCount] = React.useState(0) React.useEffect(() => { // 只执行一次 setInterval(() => setCount(state => ++state), 1000) ...

阿超

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

数据加载中