0
200
Vistas¿Hay una forma más efectiva de transformar las coordenadas?
Tengo una imagen en lienzo en la que quiero hacer una distorsión trapezoidal. El código en sí está listo, pero es lento, muy lento. Imágenes de 400x400 en ~10-20 segundos en una máquina de escritorio i7. Sin embargo, quiero ejecutar esto en un dispositivo móvil con la máxima resolución de cámara, así que estoy buscando una forma más eficiente. Actualmente, mi código funciona así:
- solicitar las coordenadas del rectángulo de distorsión al usuario. Necesito obtener las coordenadas de cuadratura del usuario.
- Divido los lados a y c en 400 partes.
- Itero sobre la división anterior, así que tomo el punto en la parte 1/400 del lado "a" y el punto en la parte 1/400 del lado "c". Luego la sección entre los puntos en la parte 2/400. Y así.
- Divido la sección que acabo de producir por 400 e itero sobre eso también.
- Tomo el número de línea producido en el punto 2 como "X" y los puntos en el punto 4 como "Y". Las coordenadas de los puntos dados son Q y W.
- Tomo el píxel en el lienzo original en las coordenadas "Q" y "W" y lo dibujo en el lienzo de destino en la ubicación identificada por las coordenadas "X" e "Y".
¿Hay una manera más eficiente de hacer esto?
1 Respuestas
Responde la pregunta0
Como esencialmente operas a nivel de píxeles, las cosas tienen que ser bastante lentas. La forma más rápida sería utilizar WebGL y externalizar los cálculos a un sombreador de fragmentos. Sin embargo, eso podría ser un poco exagerado en este caso. Si todo lo que quiere hacer es transformar una imagen en perspectiva, hay una pequeña biblioteca lista para usar, aunque no tan precisa como en el nivel de píxeles, que podría satisfacer sus necesidades llamada perspectiva.js
Todo lo que tiene que hacer es alimentarlo con una imagen y los cuatro puntos de esquina deseados.
Aquí hay un ejemplo:
let canvas = document.getElementById("canvas"); let image = new Image(); image.onload = function() { let ctx = canvas.getContext("2d"); let p = new Perspective(ctx, image); p.draw([ [65,43], [266, 16], [304,251], [26,151] ]); } image.src = "https://picsum.photos/id/1079/200/300"; canvas { border: gray solid 1px; } <script src="https://cdn.rawgit.com/wanadev/perspective.js/master/dist/perspective.min.js"></script> <canvas id="canvas" width="400" height="300"></canvas>