Javascript 使用带有透明PNG的画布调整像素大小

我想使用画布选项imageSmoothingEnabled=false实现像素化效果；因此，滚动条上的图像“取消模糊”

在使用透明图像即PNG之前，一切正常。将投影缩放后的图像，该图像将保留在背景中

此外，在用户滚动几个像素之前，不会加载图像

我发现函数拥有设置偏移量的参数。然而，我还没有找到解决这个问题的办法

演示

---

一些快速的改变让它发生

使用第二块画布进行像素化

等待图像加载，然后再进行渲染

onscroll在您滚动之前不会启动，因此当图像加载后，调用渲染函数来显示图像

canvas.width=innerWidth-20；
ctx=canvas.getContext（“2d”）；
var-ctxImage；
const img=新图像；
img.src=https://upload.wikimedia.org/wikipedia/commons/b/bb/Gorgosaurus_BW_transparent.png';
///等待图像实际可用
img.onload=函数（）{
//我不知道这是为了什么，所以删除了下面两行
//image1.src=“nf.png”；
//drawImage（图像1,50,50,10,10）；
//创建画布以匹配图像
var c=document.createElement（“画布”）；
canvas.width=Math.min（canvas.width，（c.width=this.naturalWidth））；
canvas.height=c.height=this.naturalHeight；
ctxImage=c.getContext（“2d”）；
//更改画布大小会重置状态，因此需要再次设置。
ctx.imageSmoothingEnabled=假；
onScroll（）；
pixelate（100）；//第一次调用
};
ctx.font=“32px arial”；
ctx.textAlign=“中心”；
ctx.fillText（“加载请稍候”，ctx.canvas.width/2，ctx.canvas.height/4）；
///主要功能
功能像素（v）{
document.getElementById（“v”）.innerHTML=“（v）：”+v；
///如果处于播放模式，请使用该值，否则请使用滑块值
变量大小=数量（v）*0.01；
var w=img.宽度*尺寸；
var h=img.高度*尺寸；
clearRect（0，0，canvas.width，canvas.height）；
ctxImage.clearRect（0，0，ctxImage.canvas.width，ctxImage.canvas.height）；
ctxImage.drawImage（img，0，0，w，h）；
ctx.drawImage（ctxImage.canvas，0，0，w，h，0，0，canvas.width，canvas.height）；
}
函数onScroll（）{
addEventListener（“滚动”，函数（）{
变量y=window.pageYOffset；
如果（y>10）{
y=数学功率（y，0.65）；
如果（y>=100）{
y=100；
}
像素（y）；
}
});
}

#修复{
位置：固定；
}
html{
高度：2000px；
}

1

当您实现requestAnimationFrame时会发生什么，这解决了问题吗？说到性能：没有。我的问题是实际（透明）画布图像后面的缩放图像，我想去掉它。我不知道这是否会帮助您完成最后一件事，但是有一个叫做

filter

的CSS属性可以得到模糊过滤器。e、 g:`过滤器：模糊（3px）`太棒了，非常感谢你！我想把它投射到第二块画布上，但不知道怎么做。

var ctx = canvas.getContext('2d'),
  img = new Image(),
  play = false;

/// turn off image smoothing - this will give the pixelated effect
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;


/// wait until image is actually available
img.onload = function(){
                image1.src="nf.png";

                context.drawImage(image1, 50, 50, 10, 10);
                };

img.src = 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Gorgosaurus_BW_transparent.png';

/// MAIN function
function pixelate(v) {
  document.getElementById("v").innerHTML = "(v): " + v;

  /// if in play mode use that value, else use slider value
  var size = v * 0.01;

  var w = canvas.width * size;
  var h = canvas.height * size;

  /// draw original image to the scaled size
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, w, h);
  ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);
}

function onScroll() {
  $(window).on('scroll', function() {
    var y = window.pageYOffset;
    if (y > 10) {
      y = Math.pow(y, 0.8);
      if (y >= 60) {
        y = 100;
      }
      pixelate(y);
    }
  });
}
onScroll();