Блог

Я хотел бы создать определенный визуальный эффект, взяв изображение на холсте HTML5, уменьшив его масштаб, а затем изменив его размер до исходного. Я хочу, чтобы конечное изображение, по сути, выглядело намного более низкого качества, либо пиксельным, либо слегка размытым, в зависимости от того, какой тип защиты используется. Эта картинка-тот эффект, который я хочу (создается в photoshop путем уменьшения масштаба, а затем увеличения).

Я пытался жонглировать несколькими вложенными полотнами, используя шаблоны или масштаб, но не совсем понял, как этого достичь.

Любые предложения будут только приветствоваться 🙂

ну, вы можете применить изображение к холсту, а затем получить растровое изображение и делать все, что захотите:

 c.drawImage(img,0,0) data = c.getImageData(0,0,img.width, img.height).data pixels = [];  for(px = 0; px lt; data.length; px =4){  pixels.push([data[i], data[i 1], data[i 2], data[i 3]]) } // suppose you want to scale 1:2 scaled = [] for(px = 0; px lt; pixels.length; px  ){  if(px % 2){  scaled.push(pixels[px])  } } // scaled contains the alternate pixels (first yes, second no, third no...) c.putImageData(scaled, 0, 0);  // go back to the original size with the scaled original_scaled = [] scaled = [] for(px = 0; px lt; scaled.length; px  ){  if(px % 2){  original_scaled.push(pixels[px])  original_scaled.push(pixels[px])  } } c.putImageData(original_scaled, 0, 0);  

это делается с помощью масштабирования… однако я не думаю, что это правильный путь… вероятно, используя маску, вы добьетесь лучшего результата, например, используя среднее значение соседних пикселей