[英]Is there a way of drawing an image OVER HTML5 canvas 2d drawings?
[英]create a 2d array of image pixels using canvas html5
你好伙計們我試圖將圖像像素復制到矩陣中,以便我以后可以使用它。 我想知道我是否正確使用js中的矩陣,因為我是一個begginer謝謝
<canvas id="Canvas" >
Navigator doesnt support canvas
</canvas>
<script type="text/javascript">
var img = new Image();
img.src = "jj.JPG"; // Set source path
img.onload = function() {
var matrix = [];
context.putImageData(idata, 0, 0);
for(var y = 0; y < canvas.height; y++) {
matrix[y] = [];
for(var x = 0; x < canvas.width; x++){
var imgd = context.getImageData(x, y, canvas.width, canvas.height);
var pix = imgd.data;
var pos = (y * canvas.width + x) * 4;
matrix[y][pos]= pix[pos];; //red
matrix[y][pos+1] =pix[pos+1];; //bleu
matrix[y][pos+2]= pix[pos+2];; //green
matrix[y][pos+3]= 255; //alpha
}
}
</script>
</body>
</html>
for(var y = 0; y < canvas.height; y++) {//ligne
matrix[y] = [];
for(var x = 0; x < canvas.width; x++){
//colonne
var imgd = context.getImageData(x, y, canvas.width, canvas.height);
var pix = imgd.data;
var pos = (y * canvas.width + x) * 4; // position de pixel
matrix[pos]= pix[pos];; // some R value [0, 255]
matrix[pos+1] =pix[pos+1];; // some G value
matrix[pos+2]= pix[pos+2];; // some B value
matrix[pos+3]= 255; // set alpha channel
}
}
return matrix;
}
for(var y = 0; y < canvas.height; y++) {//ligne
for(var x = 0; x < canvas.width; x++){
//colonne
var imgd = context.getImageData(x, y, canvas.width, canvas.height);
var pix = imgd.data;
var pos = (y * canvas.width + x) * 4; // position de pixel
matrix[pos]= pix[pos];; // some R value [0, 255]
matrix[pos+1] =pix[pos+1];; // some G value
matrix[pos+2]= pix[pos+2];; // some B value
matrix[pos+3]= 255; // set alpha channel
}
}
return matrix;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.