[英]Canvas getImageData().data return half image
我正在尝试从图像源生成像素化的画布-但是在比我的画布高的图像上,getImageData()函数有一个奇怪的行为-我一直仅获取最大高度数据[max-height * max的平方-高度]。 我在这里想念什么吗?
function generatePixels(){
const pixel_size = 10;
const x = 0; const y = 0;
const w = temp_ctx.canvas.width;
const h = temp_ctx.canvas.height;
let min_width = w,
min_height = h,
max_width = 0, max_height = 0;
for (var j = y; j < (y+h); j += pixel_size) {
for (var i = x; i < (x+w); i += pixel_size) {
// get current pixel image data (x,y,10,10);
var data = temp_ctx.getImageData(j, i, pixel_size, pixel_size).data;
// draw pixel on rendered canvas
rendered_ctx.fillStyle = '#' + (data[2] | (data[1] << 8) | (data[0] << 16) | (1 << 24)).toString(16).slice(1);
rendered_ctx.fillRect((j + pixel_size), (i + pixel_size), 10, 10);
}
}
}
您可以在此处找到代码示例: https : //codepen.io/AceDesigns/pen/dZEmjZ
请在下面找到可行的代码。 问题在于for循环条件。
对于(var j = y; j <(y + h); j + = pixel_size){for(var i = x; i <(x + w); i + = pixel_size){
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.