canvas 删除图片上的点

 

<canvas id="canvas" width="200" height="200"  ></canvas>
<script>
    let canvas = document.getElementById("canvas");
	let cxt = canvas.getContext("2d"); // 拿到对象

    let img = new Image(); 
    img.src = "这是图片的路径"
    img.onload = function(){ // 当图片load之后 将图片绘制在canvas
        cxt.drawImage(img,0,0,img.width,img.height );// 四个参数  起点坐标 x , y , 绘制宽度 width ,height
        // 重点 cxt.getImageData(i,j,1,1).data  获取某一个点的rgba值  i , j 为起始点  后面的 1,1同drawImage 的 width ，height 都表示从起始点延伸的宽度 这个我只获取一个点
        // 该方法返回一个数组 对应到rgba的值 
        let arr = cxt.getImageData(i,j,1,1).data;
		for( var i = 0 ; i < img.width ; i++){ // 连个for循环 遍历的点所有
					for( var j = 0 ; j < img.height ; j++){
						let arr = cxt.getImageData(i,j,1,1).data;
// 判断 如果不想要某个rgb范围内的点 则使用clearRect 删除
						if( arr[0] < 70 && arr[1]< 70 && arr[2] < 70 ){ 
							cxt.clearRect(i,j,1,1);
						}
					}
				}
            
    
    }
// 下载已处理好的图片方法  canvas 为canvas 对象 是document.getElementById("canvas")获取的
//  不是cxt  name 为下载的文件的名字
    function downLoadImage(canvas,name) {
		  let a = document.createElement('a') // 创建a标签
			let e = document.createEvent('MouseEvents') // 创建鼠标事件对象
			e.initEvent('click', false, false) // 初始化事件对象
			a.href = canvas.toDataURL() // 设置下载地址
			a.download = name // 设置下载文件名
			a.dispatchEvent(e)
		}
</script>