1

so I'm having some issues with my code here.

Essentially I'm trying to take my image, and create a new image that is x times bigger than the original.

I do this by copying r, g, b & a of every pixel and putting the information into a new picture which I then print on a new canvas.

I'm not getting any errors, but it's also not showing up on my canvas?

Any idea what I could have done wrong?

My code:

updated with working code

This will take an image and then enlarge it anti-aliased. It doesn't preserve transparency, but that can easily be tweaked:

<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>
Daniel Bengtsson
  • 113
  • 9
  • Just curious, why not use drawImage() with scaling parameters (ie. `ctx.drawImage(img, 0, 0, newWidth, newHeight);`) ? –  Mar 11 '17 at 03:47
  • Well, because if you scale it up like that it becomes aliased, ie fuzzy. If you try that on an image with .width * 16 and .height * 16 for example you will see really big fuzzy lines all over the place instead of clearly defined 16 * 16 blocks, ie anti-aliased if that makes sense. – Daniel Bengtsson Mar 11 '17 at 14:27
  • 1
    You can turn off image-smoothing (imageSmoothingEnabled=false on the context, sometimes with prefix) to get nearest neighbor interpolation. –  Mar 11 '17 at 23:30
  • Oh, I know - but the support of imageSmoothingEnabled in different browsers seems to be spotty at best. This way I get something that will work across all versions of browsers that support using canvas. I've solved it now though, will update my question with the code incase someone comes across it. – Daniel Bengtsson Mar 12 '17 at 13:51
  • I'm not that happy with the math of it though, so any improvements would be appreciated. I mean it works, but it doesn't seem...neat. – Daniel Bengtsson Mar 12 '17 at 14:01

0 Answers0