记录一下， canvas实现获取图片每个坐标点，以描点方式渲染图片

标签：can   EDA   item   tmp   onload   i++   element   png   dom   

var result_arr = [];
let dom = document.getElementById(‘canvas‘),
ctx = dom.getContext(‘2d‘);
var img = new Image();
img.src = ‘../images/logo.png‘;
img.onload = function(){
ctx.drawImage(img,0,0,180,150);
var cw = canvas.width , ch = canvas.height;
let imgData = ctx.getImageData(0,0,cw,ch).data;
var i = 0 , len = imgData.length , j = 0;
var tmpx = 0;
for( ; i < len ; i++ ){
tmpx+=1;
if(i % 1200 == 0 && i!= 0){
j+=1;
tmpx = 0;
};
var rgbas = `rgba(${imgData[i]},${imgData[i+1]},${imgData[i+2]},${imgData[i+3]})`;
result_arr.push( { x : tmpx , y : j , rgbas : rgbas } );
i+=3;
};
ctx.clearRect(0,0,cw,ch);
result_arr = result_arr.filter(item=>{ return item.rgbas != ‘rgba(0,0,0,0)‘ });
var i = 0 ;
function draw(){
for( var i = 0 ;i < result_arr.length; i++ ){
ctx.fillStyle = result_arr[i].rgbas;
ctx.fillRect( result_arr[i].x , result_arr[i].y ,1,1);
};
}
draw();
};

记录一下， canvas实现获取图片每个坐标点，以描点方式渲染图片

标签：can   EDA   item   tmp   onload   i++   element   png   dom   

原文地址：https://www.cnblogs.com/lkkk/p/12966936.html