javascript:通过读取像素数据

时间:2017-03-10 22:07:56

标签: javascript canvas pixels putimagedata

所以我在这里遇到了一些问题。

基本上我正在尝试拍摄我的图像,并创建一个比原始图像大x倍的新图像。

我这样做是通过复制r,g,b&每个像素中的一个,并将信息放入一张新图片中,然后在新画布上打印。

我没有收到任何错误,但它也没有出现在我的画布上?

知道我本可以做错什么吗?

我的代码:

使用工作代码更新

这将拍摄图像,然后将其放大反锯齿。它没有保持透明度,但可以轻松调整:

<script>
var c = document.getElementById("annie");
var ctx = c.getContext("2d");

scr_opt = new Array();
scr_opt[0] = 16;        //zoom factor

var zoom_img = new Image();
zoom_img.src = 'myownsprites.png';

zoom_img.onload = function() {
    var spr_w = 36;
    var spr_h = 75;
    var pwdth = spr_w * scr_opt[0];
    var phght = spr_h * scr_opt[0];
    ctx.drawImage(zoom_img, 0, 0, zoom_img.width, zoom_img.height);
    var src_data = ctx.getImageData(0, 0, spr_w, spr_h);
    var imgData = ctx.createImageData(pwdth, phght);
    for (var i = 0; i < src_data.data.length; i += 4) {
        var r = src_data.data[i];
        var g = src_data.data[i+1];
        var b = src_data.data[i+2];
        var a = src_data.data[i+3];
        var p = i * scr_opt[0] + ((pwdth * 4) * ((scr_opt[0] - 1) * (i - (i % (spr_w * 4)))/(spr_w * 4)));
        for (var i_height = 0; i_height < scr_opt[0]; i_height++) {
            for (var i_width = 0; i_width < scr_opt[0]; i_width++) {
                i_star = p + (i_width * 4);
                i_star = i_star + pwdth * 4 * i_height;
                imgData.data[i_star+0] = r;
                imgData.data[i_star+1] = g;
                imgData.data[i_star+2] = b;
                imgData.data[i_star+3] = a;
            }
        }
    }
    ctx.putImageData(imgData, 110, 10);
    ctx.putImageData(src_data, 10, 10);
alert(zoom_img.data[4])
}
</script>

0 个答案:

没有答案