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

• la etapa 1 es la imagen en bruto
• la etapa 2 es escala de grayscale(100%) trabajando en javascript CANVAS API
• la etapa 3 está invert(100%) trabajando en javascript CANVAS API
• la etapa 4 es blur(5px) trabajando en javascript CANVAS API
• etapa 5 globalCompositeOperation = '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 API

y 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