0
209
VistasIs there a more effective way to transform coordinates?
I have a picture on canvas that I want to do a trapezoidal distortion on. The code itself is ready, but it is slow, very slow. 400x400 images in ~10-20 seconds on an i7 desktop machine. However, I want to run this on a mobile device with maximum camera resolution, so I'm looking for a more efficient way. Currently, my code works like this:
- request the coordinates of the distortion rectangle from the user. I need to get the quadrature coordinates from the user
- I divide the sides a and c into 400 parts.
- I iterate over the previous division, so I take the point on the 1/400th part of the side "a" and the point on the 1/400th part of side "c". Then the section between the points on the 2/400 part. And so on.
- I divide the section I have just produced by 400 and iterate over that as well.
- I take the line number produced in point 2 as "X" and the points in point 4 as "Y". The coordinates of the given points are Q and W.
- I take the pixel on the original canvas at coordinates "Q" and "W" and draw it on the target canvas at the location identified by coordinates "X" and "Y".
Is there a more efficient way to do this?
1 Respuestas
Responde la pregunta0
As your essentially operating on the pixel level things have to be pretty slow. The fastest way would be to utilize WebGL and outsource the calculations to a fragment shader. That might be a bit of an overkill in this case though. If all you want to do is perspectively transform an image, there's a ready-to-use tiny library - though not as acurate as on the pixel level - which might suite your needs called perspective.js
All you have to do is feed it an image and your desired four corner points.
Here's an example:
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>