CamanJS

发表于2023-06-18|更新于2026-02-24

|浏览量:

过分宽大的法律，不易使人服从；太严厉的法律，则绝少被遵守。——富兰克林

分享一个前端基于canvas的图片js库

安装

1	npm install caman

用法：

Caman('#my-image', function () {
   this.brightness(10);
   this.contrast(30);
   this.sepia(60);
   this.saturation(-30);
   this.render();
 });

html

<img 
    data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)"
    data-caman-hidpi="/path/to/image@2x.jpg"
    src="path/to/image.jpg"
  >

前端

相关推荐

2023-04-15

vueuse

多数人在心底蔑视德，但很少有人轻视荣誉。——沃夫拿格分享一个vue的组合式api封装库vueuse github：https://github.com/vueuse/vueuse 官档：https://vueuse.org/ 大致用法： 12345678910111213141516171819202122import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorag...

2023-08-18

aspect-ratio

物以稀为贵，情因老更慈。——白居易分享一个css属性aspect-ratio 大家其实能看出来值2/1就是宽高比这个属性在width和height只要有任意一个没有配的情况下就会生效，非常方便用于配置一些指定宽高比例的场景

2024-05-12

zui

读书须求大义，不可缠绕于琐碎传注之间。——贺钦分享一个禅道开源的 UI 库 ZUI https://github.com/easysoft/zui 官方文档： https://openzui.com/ ZUI 3 是一个全新的开源 UI 组件库，提供了丰富的实用组件，并提供自由的定制使用方式，不依赖任何 JavaScript 框架，可以在任何 Web 应用中通过原生的方式使用。访问 ZUI 3 | ZUI 3 来提前预览组件库。 👉 如果你需要访问 ZUI 1，请访问 https://openzui.com/ ，ZUI 1 源码已经转移到 zui1 分支。特性 🌸 丰富的 CSS 工具类：基于 Tailwind CSS 提供了丰富的 CSS 工具类，包括特别的语义化外观类名； 💠 强大的 JS 组件：基于 Preact 提供了大量 JavaScript 组件，每个组件提供了大量实用的功能选项； 💖 友好现代的界面：提供了经过精心设计的界面风格，所有组件交互经过反复优化和验证以提供最佳方式； 🌗 主题和深色模式：基于 CSS 变量的主题模式，快速生成主题，内置...

2024-07-02

uniapp生成二维码

绝不离开自己祖国的人充满了偏见。——哥尔多尼分享一个库，在uniapp里能生成指定二维码 https://github.com/q310550690/uni-app-qrcode uni-app 二维码生成器作者：诗小柒 H5、微信小程序、支付宝小程序、APP，其它平台的小程序没有测试使用canvas生成可设置二维码背景色，前景色，角标色可设置二维码logo 重要的事情说3遍重要的事情说3遍重要的事情说3遍 IOS、Android真机都可以正常生成二维码使用的时候出现无法生成二维码或空白的请先github直接打包下载，问题依旧，请github上直接提出问题并配图有问题请说明问题原因，这样我才好定位，否则我也无法解决如果此插件有帮助到你请打5分或赞赏我，你的支持是我更新的动力图片1 是微信小程序真机实测图片2 是微信小程序模拟实测图片3 是支付宝小程序模拟器实测图片4 是安卓真机实测图片5 H5 开始使用NPM 1npm i tki-qrcode GIT 1git clone https://github.com/q310550...

2022-04-07

setState异步问题

若人间有情，那是开始，也是尽头。——北岛怀念顾城今天使用react中setState后立马从state中获取，然后使用，发现时灵时不灵的，我立马意识到setState可能是异步的，翻看官方文档，果然：调用 setState 其实是异步的 —— 不要指望在调用 setState 之后，this.state 会立即映射为新的值。如果你需要基于当前的 state 来计算出新的值，那你应该传递一个函数，而不是一个对象（详情见下文）。代码不会像预期那样运行的示例： 123456789101112131415161718incrementCount() { // 注意：这样 *不会* 像预期的那样工作。 this.setState({count: this.state.count + 1});}handleSomething() { // 假设 `this.state.count` 从 0 开始。 this.incrementCount(); this.incrementCount(); this.incrementC...

2020-08-27

安全密码正则

当你回首往事时，不因碌碌无为而悔恨，不为虚度年华而羞耻，那你就可以很骄傲地和自己讲，你不负此生! 今天分享一个密码的正则，密码必须包含大、小写字母、数字、特殊符号至少三种,且长度为8-20 1^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$ javascript代码 123if (!(/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8...

阿超

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

数据加载中