- 博客(11)
- 收藏
- 关注
RSS订阅原创 JS正则获取HTML所有img的链接
由于html每个字符的组成是任意的，要找到img元素的位置只需直接匹配到img的标签<img，/<img/同时img标签里可以有多个属性，src属性出现位置也是不固定的，所以得用非贪婪模式*?（向后最近匹配）来匹配到src的位置上，中间的字符用.（匹配除换行符的任意字符）来匹配/<img.*?src=/注意 url 可能使用单引号或双引号（[]匹配括号内的任一字符）...
2019-12-23 10:44:50
3885
1
原创 JS正则匹配带两位小数的数字
带两位小数的数字可以拆分成整数和小数部分1.整数部分如果位数在两位以上，首位不能是0，不可能出现0199，所以这里就有两种情况，一位的情况（^开头匹配，$结尾匹配，这里从头到尾只能是数字）/^[0-9]$/位数两位以上（\d匹配任意数字）/^[1-9]\d+$/两种情况都是要首尾匹配的，所以把它们分属到同一个组里/^([0-9]|[1-9]\d+)$/2.小数部分结构是.两位数...
2019-12-23 10:43:19
8517
原创 高斯模糊之canvas实现
依然是这位美女接着来高斯模糊一下模糊一下更具有朦胧美,还有小磨皮效果,痘痘马上无影踪,一键体验摘下近视镜的快感.好了,就扯这么多.下面来看看怎么实现高斯模糊.高斯模糊的模糊感是参照每个像素点周边的像素来进行按权运算,而不是随便掺杂个五颜六色到像素里.正如刚说的,按权来取得周边的值,这里的按权是依据二维正态分布来分权的.得到权后我们就可以计算出当前像素的r,g,b值了.这里要注意的是:...
2019-12-06 09:37:48
599
原创 canvas实现浮雕效果
还是这个美女,长这样然后进行一个浮雕操作一瞬间,生动活跃的人物就变成了石板雕刻,还带上了一点质感.如何实现这种浮雕质感呢?放在画布里,也就是对像素的操作嘛,关键就在怎么操作了.先这样:把每个像素的通道和相邻像素的通道值进行差值运算,再这样:得到结果加上中性灰的值(128),然后再这样:当前像素把以上运算得到结果进行一次按权的平均运算(就是实现灰度时候的按权整数法),把所得值赋值给各个...
2019-12-05 15:23:09
690
原创 canvas实现图像反相
还是这个美女,长这样然后她进行一个反相操作妈惹,反相后有点怕怕!但惊恐并不能阻挡我们的求知欲望,通过对比,发现反相是把原图的像素变成了它们各自的补数,不知道说啥?也看不出来?下边来普及一下,我们知道RGB位图是由红绿蓝三个通道组成每个像素点的颜色组成的,而每个通道都有256个色值从0x00-0xff,这和平时CSS用的backgroundColor属性的RGB值一样.那么反相其实是基于最大...
2019-12-04 09:55:53
478
原创 canvas实现图像黑白
还是这个美女,长这样然后进行一个黑白操作一幅泼墨画恒然而生。黑白说白了就是非黑即白。那哪个变成黑,哪个变成白呢?我们知道黑和白的分界是灰，灰可以当成一半黑一半白，在色值表示就是256 / 2 = 128，记住这个128，我们要把像素的所有通道根据灰度的权平均法得出平均值,如结果大于等于128，就把所有通道取白(255)，否则所有通道取黑(0)。这样就很清晰了1.获取画布上图像的像素信息...
2019-12-04 09:46:40
1090
原创 canvas实现图像灰度
还是这个美女,长这样然后对这图进行一个灰度操作啊,感觉整个世界失去了色彩!但不要紧,要紧的是怎么丢掉色彩变成灰度图像呢?实现灰度的算法有好几种,如:1.平均数法:(R + G + B)/32.按权的整数法:(R0.3 + G0.59 + B*0.11)3.移位方法:(R76+G151+B*28)>>8…这里我们选用NO.2,按权的整数法,它基本可以满足我们的视觉需要了...
2019-12-03 10:00:13
430
原创 canvas实现图像水平翻转
假如有一张养眼的美女图片,像这样接着照片水平翻转一下,看还养不养眼翻转后依然养眼,我们来对比一下,水平翻转后,左边和右边都互换了过来,也就是说,左边的像素根据中轴对称和右边的像素进行了互换操作.木有错,水平翻转的关键点就是每一行的左右像素根据轴对称,跟着这个重点,我们来Look一下实现的步骤1.获取画布上图像的像素信息2.遍历每一行作为外循环3.遍历当前行的列作为内循环,把列的左边像...
2019-12-03 09:52:57
2581
2
原创 canvas实现图像垂直翻转
假设这有一张养眼图片,它长这样接着我想把照片垂直翻转一下,变成这样翻转后体验了一把倒立的美女. 经过对比,垂直翻转后,上边和下边都互换了过来,也就是说,上边的像素根据垂直中轴对称和下边的像素进行了互换操作.猜对了,垂直翻转的关键点就是每一列的上下像素根据轴对称,跟着这个重点,我们来Look一下实现的步骤1.获取画布上图像的像素信息2.遍历总行数一半的每一行作为外循环(向下取整)3.遍...
2019-12-02 22:25:12
1510
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人