createjs：如何像素化位图？

Question

我有一个非常具体的项目，并且在2周后，最好的选择似乎是在空电影剪辑中使用位图。除了一个问题之外，这是完美的 - 我不知道如何将图像像素化。

这是我到目前为止的代码：

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

所有这些都可以按照我的意愿工作，但是我不知道如何像素化图像。

我找到了一种解决方案，其中我使用canvas.context.drawimage（）绘制图像，但是由于项目的参数不足。这样做是这样的：

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);
}

因此，基本上您将其绘制为小，然后将该小实例用作图像源来绘制更大和中提琴的图像源，它是像素化的。...但是由于我遇到的其他问题，我无法使用此方法。

有人可以帮我解决这个问题吗？

Answer 1

示例中的像素化是通过在HTML ＆lt; canvas＆gt;元素上绘制原始图像来完成的。但是，使用CreateJS，您没有内置的支持来操纵其自己的bitmap对象的来源。

有希望。除了url到图像外，位图的构造函数还接受＆lt; canvas＆gt;元素。因此，这里的诀窍是加载图像，然后使用临时＆lt; canvas＆gt;进行准备 - 因此将其定为像素化。

例如：

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>