JS canvas. Фильтры на фото и как их задать?

Question

[Anonymous_toaster]

в html , мы можем задать свойство filter в css на элемент картинки и оно изменися. Ну например,
filter :grayscale(1)

Но как сделать тоже самое на Canvas?

Answer 1

[4ce]

canvas css filter
https://www.google.com/search?q=canvas+css+filter
CanvasRenderingContext2D.filter
https://developer.mozilla.org/en-US/docs/Web/API/C...

≈для текста

<canvas id="canvas"></canvas>
<script>
ctx = canvas.getContext('2d');
//vvvvvvvvvvvvvvvvvvvvvv;
ctx.filter = 'blur(4px)';//<=you search this;
//^^^^^^^^^^^^^^^^^^^^^^;
ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);
</script>

≈ и для картинки( для демо нужна картинка поэтому смотри первый пример, принцип тот же и этот код в спойлере нажми на эту строчку чтоб рзвернуть)

<canvas id="canvas" width="400" height="150"></canvas>
<div style="display:none;">
  <img id="source" src="rhino.jpg" />
</div>
<script>
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
image = document.getElementById('source');

image.addEventListener('load', (e) => {
  // Draw unfiltered image
  ctx.drawImage(image, 0, 0, image.width * .6, image.height * .6);

  // Draw image with filter
  ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(-9px 9px 3px #e81)';
  ctx.drawImage(image, 400, 0, -image.width * .6, image.height * .6);
});
</script>

Дополнение: так как возможно(затестить не вышло)

"Упомянутые выше фильтры не работают в сафари."
как заметил Alexandroppolus

Примечание:не знаю на сколько уместно это дополнение в рамках ответа на вопрос изгаляться по всякому можно...
Я попробовал загрузить css фильтр в svg который встроен в canvas,
пока не знаю работает это в Safari или нет но у меня работает,
собирался возможно написать полифил но на сегодня это пока всё...

Не очень легко воспринимаемый код html страницы в спойлере

<!--
demo canvas with css "grayscale(1)" filter in svg container
^(this maybe need if canvas css filter  not support but i no know maybe this no work)
for:
https://qna.habr.com/q/1251088#answer_2290516
-->
demo image canvas id=iDemoImage<br>
<canvas id="iDemoImage" width="100" height="100" style="border:solid 1px"></canvas>
<script>
(function(elementCanvas1,gC2,f){
gC2=elementCanvas1.getContext('2d');
function r1(n){
return Math.round(Math.random()*n)
}
for(f=0;f<50;f++){
gC2.fillStyle='rgb('+r1(255)+','+r1(255)+','+r1(255)+')';
gC2.fillRect(r1(80),r1(80),10+r1(10),10+r1(10));
}
})(iDemoImage);
</script><br><br>
demo canvas with css "grayscale(1)" filter in svg container id=iDemoFilter<br>
<canvas id="iDemoFilter" width="400" height="150" style="border:solid 1px"></canvas>
<script>
(function(elementCanvas1,gC2,image1){
gC2=elementCanvas1.getContext('2d');
gC2.drawImage(iDemoImage,25,25);

image1=document.createElement('img');
image1.src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="'
+iDemoImage.width+'" height="'+iDemoImage.height+'"> <image style="'+
 /*vvvvvvvvvvvvvvv*/
'filter:grayscale(1)'/*<=css filter here*/
 /*^^^^^^^^^^^^^^^*/
+'" href="'+iDemoImage.toDataURL()+'" height="100%" width="100%"/></svg>';
image1.onload=function(){gC2.drawImage(image1,150,25)};

gC2.filter='grayscale(1)';
gC2.drawImage(iDemoImage,275,25);
})(iDemoFilter);
</script>

У меня результат выглядел примерно так(первое картинка без фильтров, второе в svg с фильтром, третье обычный фильтр):

Удачи ~_^ !

Answer 2

[Alexandroppolus]

Упомянутые выше фильтры не работают в сафари.
Можно сделать вручную. Берутся значения цветов пикселей https://developer.mozilla.org/en-US/docs/Web/API/C... , преобразуются как тебе надо, и кладутся обратно https://developer.mozilla.org/en-US/docs/Web/API/C...

Больше примеров тут https://developer.mozilla.org/en-US/docs/Web/API/C...

Comments

[4ce]

getImageData() это не фильтр* а обработка фрагмента холста по пиксельно(по четверть пиксельно)
*ну да тоже получается фильтр но это другое и просили вроде другое

Спасибо за интересный пример ~_^ !

upd: прочитал коммент ещё раз про пиксели уже было сказано...

[Alexandroppolus]

4ce, а я, в свою очередь, только сейчас узнал, что в канве появились фильтры ))Так что тоже спасибо )

[Anonymous_toaster]

getImageData() Не срабатывает при условии ненадежного хоста вроде бы

[Alexandroppolus]

Anonymous_toaster, точнее, если картинка с другого origin, и не имеет CORS-заголовков ответа. В этом случае да, попиксельная обработка не вариант.