Question

我有一个问题，我在一些jquery事件pixelizate后有一个我想要的图像。我不想使用pixelate.js或其他插件，它们对我的项目不利。

我想要什么，自动将图像更改为更小的＆＃34;副本＆＃34;与css图像渲染相同的图片：像素化但没有图像的第二副本。有可能用CSS / javascript吗？

抱歉我的英文不好，谢谢！

Answer 1

img {
    height: 100%;
    width: 100%;
}

您可以将img的大小设置为其父级的最大大小。因此，如果父级调整大小，则图像也应相应调整大小。

Answer 2

您可以使用HTML5的canvas元素执行此操作。基本上，我们想要拍摄我们的图像，将其绘制到一个小画布，然后拉伸画布以填充原始图像大小。这是一个例子：

＆＃13;

$('.image-container').each(function() {
  var canvas = $(this).children('canvas').get(0),
      ctx = canvas.getContext('2d'),
      image = $(this).children('img').get(0),
      imageWidth = $(image).width(),
      imageHeight = $(image).height(),
      scaleFactor = 0.05;
  
  canvas.width = scaleFactor * imageWidth;
  canvas.height = scaleFactor * imageHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  $(canvas).width(imageWidth);
  $(canvas).height(imageWidth);
});

$('#toggle-pixelization').on('click', function() {
  $('.image-container').children().toggleClass('hidden')
});

＆＃13;

.hidden {
  display: none;
}

.image-container canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering:   -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image-container">
  <img src="https://placekitten.com/150/150" />
  <canvas class="hidden"></canvas>
</div>
<button id="toggle-pixelization">Toggle Pixelization</button>

＆＃13;

具有固定宽度的图像来填充div

2 个答案: