Hola, estoy tratando de convertir una imagen en una imagen similar a un boceto antes de cargarla en el servidor, la parte de carga no es el problema, la conversión de la imagen a una imagen similar a un boceto sí lo es. No pude buscar una biblioteca js que me ayude a lograr esto, y luego encontré esto https://www.freecodecamp.org/news/sketchify-turn-any-image-into-a-pencil-sketch-with-10 -lines-of-code-cf67fa4f68ce código de muestra en python
luego traté de recrearlo usando solo CSS y lo obtuve correctamente usando el código CSS a continuación
filter: grayscale(100%) invert(100%) blur(5px); mix-blend-mode: color-dodge;
Luego, después de eso, traté de recrearlo en Vanilla Javascript usando CANVAS API porque necesitaba cargar la imagen en el servidor que parece una imagen similar a un boceto, pero me quedé atascado en el proceso. Estas son las etapas de la conversión. estoy haciendo ver la imagen de abajo
Me quedé atascado en la etapa 4, no puedo continuar con la etapa 5, que es globalCompositeOperation = 'color-dodge';
cuando se aplica color-dodge a CANVAS API, para eliminar el desenfoque y hacer que parezca una imagen de boceto
grayscale(100%)
trabajando en javascript CANVAS APIinvert(100%)
trabajando en javascript CANVAS APIblur(5px)
trabajando en javascript CANVAS APIglobalCompositeOperation = 'color-dodge'
que es equivalente a mix-blend-mode: color-dodge;
¿Pienso? No estoy seguro, pero supuse que lo es. no funciona en javascript CANVAS APIy aquí está mi código Javascript a continuación
let img = document.createElement('img'); let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); ctx.filter = 'grayscale(100%) invert(100%) blur(5px)'; // stages 2,3,4 is working ctx.globalCompositeOperation = 'color-dodge'; // stage 5 not working ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
Bien, creo que eso es mucho, así que aquí hay un fragmento para que lo prueben. https://codepen.io/ohyeahhu/pen/MWQRweP
Además, si conocen una biblioteca JS o herramientas que puedan ayudarme a lograr esta hazaña, estoy muy abierto a cualquier sugerencia.
nota: solo en javascript o cualquier biblioteca js