0
203
ViewsIs 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 answers
Answer question0
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>