Createjs: How to pixelate bitmaps?

Question

I have a very specific project I'm working on and after 2 weeks the best option seems to be using a bitmap within an empty movie clip. It's perfect apart from one issue - I can't figure out how to pixelate the image.

Here is my code so far:

init_image = () => {
    props.image = null
    _.holder_grid.bitmap = null
    
    props.image = new Image()
    
    props.image.src = "images/myImage.jpg"
    props.image.onload = function() {

       stage.holder_grid.bitmap = new createjs.Bitmap(props.image)
       stage.holder_grid.bitmap.scale = props.image_scale
    
       stage.holder_grid.addChild(_.holder_grid.bitmap);
    
       const coords = redraw.get_centre()
       stage.holder_grid.bitmap.x = coords.x
       stage.holder_grid.bitmap.y = coords.y
    
       settings.update()

    }
}

 init_image()

Its all working as I want but I can't figure out how to pixelate the image.

I found one solution where I draw the image using canvas.context.drawImage() but due to the parameters of the project it's not adequate. That worked like so:

const canvas = document.getElementById("canvas2")
const base = document.getElementById("canvas")

const ctx = canvas.getContext("2d")
const image = new Image()
props.image = image

image.src = "images/myImage.jpg"
image.onload = function() {

    const width = base.clientWidth
    const height = base.clientHeight

    canvas.width= width
    canvas.height= height

    const scale= props.image_scale
    
    const x = (ctx.canvas.width - image.width * scale) / 2
    const y = (ctx.canvas.height - image.height * scale) / 2
    
    //draws tiny
    const size = props.pixelate/1
    const w = canvas.width * size
    const h = canvas.height * size
    ctx.drawImage(image, 0, 0, w, h);

    // turn off image aliasing
    ctx.msImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    // enlarge the minimized image to full size    
    ctx.drawImage(canvas, 0, 0, w, h, x, y, image.width * scale, image.height * scale);
}

So basically you draw it small then use that small instance as the image source to draw it bigger and viola, it's pixelated.... but due to other issues I've encountered doing this I cannot use this method.

Can anyone help me with this issue please?

Answer 1

The pixelation in your example is accomplished by drawing the original image at a lower resolution to an html <canvas> element. With createJS however you don't have built-in support for manipulating the sources of it's own Bitmap object.

There's hope though. Besides URL's to images, the constructor to a Bitmap also accepts a <canvas> element. So the trick here is loading the image, preparing - thus pixelating it - using a temporary <canvas> and once it's done, pass this element to the Bitmap constructor.

For example:

let stage = new createjs.Stage("canvas");

function pixelate(src) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let image = new Image();
  image.crossOrigin = "anonymous";
  
  image.onload = (e) => {
    canvas.width = e.target.width;
    canvas.height = e.target.height;

    const width = e.target.width;
    const height = e.target.height;

    canvas.width = width;
    canvas.height = height;

    const scale = 1;

    const x = (ctx.canvas.width - image.width * scale) / 2;
    const y = (ctx.canvas.height - image.height * scale) / 2;

    const size = 0.125 / 1;
    const w = canvas.width * size;
    const h = canvas.height * size;
    ctx.drawImage(e.target, 0, 0, w, h);

    ctx.msImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    ctx.drawImage(canvas, 0, 0, w, h, x, y, e.target.width * scale, e.target.height * scale);

    let bitmap = new createjs.Bitmap(canvas);
    stage.addChild(bitmap);
    stage.update();
  }
  image.src = src;
}

pixelate("https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/400/300");

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<canvas id="canvas" width="400" height="300"></canvas>