java给图片坐标描点,记录一下, canvas实现获取图片每个坐标点,以描点方式渲染图片...
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();
};
原文:https://www.cnblogs.com/lkkk/p/12966936.html
總結(jié)
以上是生活随笔為你收集整理的java给图片坐标描点,记录一下, canvas实现获取图片每个坐标点,以描点方式渲染图片...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 计算机基础:存储系统知识笔记(二)
- 下一篇: 易语言黑月c编译器,易语言黑月编译器