Created
January 17, 2023 14:29
-
-
Save romainavalle/f1abbcd6ab8ef847b673a636b6aaf915 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { | |
if (arguments.length === 2) { | |
x = y = 0; | |
w = ctx.canvas.width; | |
h = ctx.canvas.height; | |
} | |
// default offset is center | |
offsetX = typeof offsetX === 'number' ? offsetX : 0.5; | |
offsetY = typeof offsetY === 'number' ? offsetY : 0.5; | |
// keep bounds [0.0, 1.0] | |
if (offsetX < 0) offsetX = 0; | |
if (offsetY < 0) offsetY = 0; | |
if (offsetX > 1) offsetX = 1; | |
if (offsetY > 1) offsetY = 1; | |
const iw = img.width; | |
const ih = img.height; | |
const r = Math.min(w / iw, h / ih); | |
let nw = iw * r; // new prop. width | |
let nh = ih * r; // new prop. height | |
let cx; let cy; let cw; let ch; let | |
ar = 1; | |
// decide which gap to fill | |
if (nw < w) ar = w / nw; | |
if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated | |
nw *= ar; | |
nh *= ar; | |
// calc source rectangle | |
cw = iw / (nw / w); | |
ch = ih / (nh / h); | |
cx = (iw - cw) * offsetX; | |
cy = (ih - ch) * offsetY; | |
// make sure source rectangle is valid | |
if (cx < 0) cx = 0; | |
if (cy < 0) cy = 0; | |
if (cw > iw) cw = iw; | |
if (ch > ih) ch = ih; | |
// fill image in dest. rectangle | |
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment