perspectivets
Version:
Transforms the perspective of an image and draw it on a canvas
168 lines (161 loc) • 6.76 kB
JavaScript
/*!
Copyright 2021 Adonmo https://www.adonmo.com/
Copyright 2010 futomi http://www.html5.jp/
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
This file was modified by Fabien LOISON <http://www.flozz.fr/>
This file was further modified by Adonmo https://www.adonmo.com/
*/
var Perspective = /** @class */ (function () {
function Perspective(ctxd, image) {
// check the arguments
if (!ctxd || !ctxd.strokeStyle) {
return;
}
if (!image || !image.width || !image.height) {
return;
}
// prepare a <canvas> for the image
var cvso = document.createElement("canvas");
cvso.width = Math.round(image.width);
cvso.height = Math.round(image.height);
var ctxo = cvso.getContext("2d");
ctxo.drawImage(image, 0, 0, cvso.width, cvso.height);
// prepare a <canvas> for the transformed image
var cvst = document.createElement("canvas");
cvst.width = ctxd.canvas.width;
cvst.height = ctxd.canvas.height;
var ctxt = cvst.getContext("2d");
this.ctxd = ctxd;
this.cvso = cvso;
this.ctxo = ctxo;
this.ctxt = ctxt;
}
Perspective.prototype.draw = function (q) {
var topLeftX = q.topLeftX, topLeftY = q.topLeftY, topRightX = q.topRightX, topRightY = q.topRightY, bottomRightX = q.bottomRightX, bottomRightY = q.bottomRightY, bottomLeftX = q.bottomLeftX, bottomLeftY = q.bottomLeftY;
// compute the dimension of each side
var dims = [
Math.sqrt(Math.pow(topLeftX - topRightX, 2) + Math.pow(topLeftY - topRightY, 2)),
Math.sqrt(Math.pow(topRightX - bottomRightX, 2) +
Math.pow(topRightY - bottomRightY, 2)),
Math.sqrt(Math.pow(bottomRightX - bottomLeftX, 2) +
Math.pow(bottomRightY - bottomLeftY, 2)),
Math.sqrt(Math.pow(bottomLeftX - topLeftX, 2) +
Math.pow(bottomLeftY - topLeftY, 2)), // left side
];
//
var ow = this.cvso.width;
var oh = this.cvso.height;
// specify the index of which dimension is longest
var base_index = 0;
var max_scale_rate = 0;
var zero_num = 0;
for (var i = 0; i < 4; i++) {
var rate = 0;
if (i % 2) {
rate = dims[i] / ow;
}
else {
rate = dims[i] / oh;
}
if (rate > max_scale_rate) {
base_index = i;
max_scale_rate = rate;
}
if (dims[i] == 0) {
zero_num++;
}
}
if (zero_num > 1) {
return;
}
//
var step = 2;
var cover_step = step * 5;
//
var ctxo = this.ctxo;
var ctxt = this.ctxt;
ctxt.clearRect(0, 0, ctxt.canvas.width, ctxt.canvas.height);
if (base_index % 2 == 0) {
// top or bottom side
var ctxl = this.create_canvas_context(ow, cover_step);
ctxl.globalCompositeOperation = "copy";
var cvsl = ctxl.canvas;
for (var y = 0; y < oh; y += step) {
var r = y / oh;
var sx = topLeftX + (bottomLeftX - topLeftX) * r;
var sy = topLeftY + (bottomLeftY - topLeftY) * r;
var ex = topRightX + (bottomRightX - topRightX) * r;
var ey = topRightY + (bottomRightY - topRightY) * r;
var ag = Math.atan((ey - sy) / (ex - sx));
var sc = Math.sqrt(Math.pow(ex - sx, 2) + Math.pow(ey - sy, 2)) / ow;
ctxl.setTransform(1, 0, 0, 1, 0, -y);
ctxl.drawImage(ctxo.canvas, 0, 0);
//
ctxt.translate(sx, sy);
ctxt.rotate(ag);
ctxt.scale(sc, sc);
ctxt.drawImage(cvsl, 0, 0);
//
ctxt.setTransform(1, 0, 0, 1, 0, 0);
}
}
else if (base_index % 2 == 1) {
// right or left side
var ctxl = this.create_canvas_context(cover_step, oh);
ctxl.globalCompositeOperation = "copy";
var cvsl = ctxl.canvas;
for (var x = 0; x < ow; x += step) {
var r = x / ow;
var sx = topLeftX + (topRightX - topLeftX) * r;
var sy = topLeftY + (topRightY - topLeftY) * r;
var ex = bottomLeftX + (bottomRightX - bottomLeftX) * r;
var ey = bottomLeftY + (bottomRightY - bottomLeftY) * r;
var ag = Math.atan((sx - ex) / (ey - sy));
var sc = Math.sqrt(Math.pow(ex - sx, 2) + Math.pow(ey - sy, 2)) / oh;
ctxl.setTransform(1, 0, 0, 1, -x, 0);
ctxl.drawImage(ctxo.canvas, 0, 0);
//
ctxt.translate(sx, sy);
ctxt.rotate(ag);
ctxt.scale(sc, sc);
ctxt.drawImage(cvsl, 0, 0);
//
ctxt.setTransform(1, 0, 0, 1, 0, 0);
}
}
// set a clipping path and draw the transformed image on the destination canvas.
this.ctxd.save();
this.ctxd.drawImage(ctxt.canvas, 0, 0);
this._applyMask(this.ctxd, q);
this.ctxd.restore();
};
Perspective.prototype.create_canvas_context = function (w, h) {
var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext("2d");
return ctx;
};
Perspective.prototype._applyMask = function (ctx, q) {
ctx.beginPath();
ctx.moveTo(q.topLeftX, q.topLeftY);
ctx.lineTo(q.topRightX, q.topRightY);
ctx.lineTo(q.bottomRightX, q.bottomRightY);
ctx.lineTo(q.bottomLeftX, q.bottomLeftY);
ctx.closePath();
ctx.globalCompositeOperation = "destination-in";
ctx.fill();
ctx.globalCompositeOperation = "source-over";
};
return Perspective;
}());
export default Perspective;
//# sourceMappingURL=index.es.js.map