javascript：通过读取像素数据，使用画布和html5创建更大的图像

所以我的代码有一些问题

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

我通过复制每个像素的r、g、b和a，并将信息放入新图片中，然后打印在新画布上来实现这一点

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

知道我做错了什么吗

我的代码：

使用工作代码更新

这将拍摄图像，然后将其放大以消除锯齿。它不能保持透明度，但可以轻松调整：

<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>

var c=document.getElementById（“annie”）；
var ctx=c.getContext（“2d”）；
scr_opt=新数组（）；
scr_opt[0]=16//缩放因子
var zoom_img=新图像（）；
zoom_img.src='myownsprites.png'；
zoom_img.onload=函数（）{
var spr_w=36；
var spr_h=75；
var pwdth=spr_w*scr_opt[0]；
var phht=spr_h*scr_opt[0]；
ctx.drawImage（缩放图像，0，0，缩放图像宽度，缩放图像高度）；
var src_data=ctx.getImageData（0,0，spr_w，spr_h）；
var imgData=ctx.createImageData（pwdth，phht）；
对于（变量i=0；i

只是好奇，为什么不使用带有缩放参数的drawImage（）（例如，

ctx.drawImage（img，0，0，newWidth，newHeight）；

）？嗯，因为如果你像这样放大它，它就会出现别名，即模糊。例如，如果你在.width*16和.height*16的图像上尝试这一点，你会看到非常大的模糊线，而不是清晰定义的16*16块，即消除混叠。你可以关闭图像平滑（上下文中的imageSmoothingEnabled=false，有时带有前缀）以获得最近邻插值。哦，我知道，但是在不同的浏览器中对ImageSmoothInEnabled的支持充其量只是零碎的。通过这种方式，我得到的东西可以在支持使用画布的所有版本的浏览器上工作。我现在已经解决了这个问题，如果有人遇到它，我会用代码更新我的问题。但是我对它的数学不是很满意，所以任何改进都会很感激。我的意思是它可以工作，但它看起来不…整洁。只是好奇，为什么不使用带有缩放参数的drawImage（）（例如，

ctx.drawImage（img，0，0，newWidth，newHeight）；

）？因为如果你像这样放大它，它就会出现别名，即模糊。例如，如果你在.width*16和.height*16的图像上尝试这一点，你会看到非常大的模糊线，而不是清晰定义的16*16块，即消除混叠。你可以关闭图像平滑（上下文中的imageSmoothingEnabled=false，有时带有前缀）以获得最近邻插值。哦，我知道，但是在不同的浏览器中对ImageSmoothInEnabled的支持充其量只是零碎的。通过这种方式，我得到的东西可以在支持使用画布的所有版本的浏览器上工作。我现在已经解决了这个问题，如果有人遇到它，我会用代码更新我的问题。但是我对它的数学不是很满意，所以任何改进都会很感激。我的意思是它很管用，但看起来不太整洁。