关于getImageData

ctx.getImageData()，可以获取canvas的data图片数据，这个图片数据返回的data是一个对象，该对象包含指定的 ImageData 对象的图像数据。 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

ImageData.datalength 可以作这样计算：300（width） X 150(height) X 4（r,g，b，a 4个分量） = 180000

关于getImageData，我之前文章也有写过 https://www.haorooms.com/post/canvas_imageData 里面有利用getImageData，过滤视频纯色背景，吸取视频颜色，防锯齿，图片灰色及反色，图片下载等

今天在这个基础上再补充一些，主要是封装成函数，更方便调用，之前主要是demo案例，大家可以看看这些demo案例https://www.haorooms.com/post/canvas_imageData

背景

在h5页面新开窗口，我们经常用window.open('haorooms.com','_blank'),但是这个方法在某些app内嵌h5中，或者某些浏览器中会阻止这个方法，那么有什么办法判断我们的open是否被阻止了呢？阻止之后我们有什么办法解决呢？今天聊聊解决方案。

解决

其实window.open有个返回值的，在打不开或者被禁用的情况下面，window.open会返回null，利用这个特性，我们可以判断这个页面目前是都可以用window.open。

例如判断如下：

前言

之前写过一篇文章css实现模糊镜效果及渐变字体和text-shadow冲突解决方案，介绍了文字渐变和阴影冲突的解决方案，但是假如文字渐变和阴影又遇到外描边怎么办呢？ 我们知道外描边一般使用阴影来实现的，假如用阴影实现，那么和阴影就有冲突了，只能用别的方式来实现外描边。

css外描边

text-stroke描边是居中描边，不是外描边，要实现外描边一般又两种解决方案：

一：通过阴影实现

  text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;

二、通过伪元素before或者after来实现，包一层,或者before、after的text-stroke: 0;，外层设置描边的2倍，都可以，下面举例一种。

例如：

前言

本文主要介绍一下css噪点效果及简单假进度条记录，最近阅读了张鑫旭的文章，发现了这两点，这两点真的让我自己实现确实需要查阅资料，本文简单的参考一下张大神的文章，同时也作为自己的积累。文章最后会放上参考文章地址，感兴趣的也可以去原文阅读。

CSS实现噪点效果

实现噪点的原理主要是应用了

 background: repeating-conic-gradient

在径向角度比较小的时候，中间区域的图形由于像素点不足，扭曲在了一起，背景区域就会出现随机点，主要是利用了这个特性。

那么实现黑白随机噪点主要运用了如下代码

.dot {
  width: 200px; height: 200px;
  background: repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/3000px 3000px, 
    repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 40% 40%/2000px 3000px;
  background-blend-mode: difference;
}

应用一：老照片效果