javascript - javascript: ピクセルデータを読み取ってキャンバスと html5 でより大きな画像を作成する

Question

だから私はここで私のコードにいくつかの問題を抱えています。

基本的に、私は自分の画像を取得して、元の画像の 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>