admin管理员组文章数量:1136610
I'm drawing images on a canvas like this:
ctx.drawImage(data[i].image, data[i].pos.x, data[i].pos.y, data[i].pos.w, data[i].pos.h);
The picture is getting stretched and I don't want this. How can I simulate the CSS property?
background-size: cover
when drawing images on the canvas?
.asp?filename=playcss_background-size&preval=cover
see the difference between 100% 100% (what I currently have) and cover (my goal).
I'm drawing images on a canvas like this:
ctx.drawImage(data[i].image, data[i].pos.x, data[i].pos.y, data[i].pos.w, data[i].pos.h);
The picture is getting stretched and I don't want this. How can I simulate the CSS property?
background-size: cover
when drawing images on the canvas?
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
see the difference between 100% 100% (what I currently have) and cover (my goal).
6 Answers
Reset to default 124It's a bit more complicated to get a cover functionality, though here is one solution for this:
Updated 2016-04-03 to address special cases. Also see @Yousef's comment below.
/**
* By Ken Fyrstenberg Nilsen
*
* drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
*
* If image and context are only arguments rectangle will equal canvas
*/
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;
var iw = img.width,
ih = img.height,
r = Math.min(w / iw, h / ih),
nw = iw * r, // new prop. width
nh = ih * r, // new prop. height
cx, cy, cw, ch, 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);
}
Now you can call it like this:
drawImageProp(ctx, image, 0, 0, width, height);
and it will scale the image proportionally to fit inside in that container.
Use the two last parameters to offset the image:
var offsetX = 0.5; // center x
var offsetY = 0.5; // center y
drawImageProp(ctx, image, 0, 0, width, height, offsetX, offsetY);
If you're looking for a simpler solution that will work for most cases, and also includes css contain-like functionality, try this:
function fit(contains) {
return (parentWidth, parentHeight, childWidth, childHeight, scale = 1, offsetX = 0.5, offsetY = 0.5) => {
const childRatio = childWidth / childHeight
const parentRatio = parentWidth / parentHeight
let width = parentWidth * scale
let height = parentHeight * scale
if (contains ? (childRatio > parentRatio) : (childRatio < parentRatio)) {
height = width / childRatio
} else {
width = height * childRatio
}
return {
width,
height,
offsetX: (parentWidth - width) * offsetX,
offsetY: (parentHeight - height) * offsetY
}
}
}
export const contain = fit(true)
export const cover = fit(false)
slightly modified version of intrinsic-scale to include scale and offset
Usage:
import {cover, contain} from './intrinsic-scale'
const {
offsetX,
offsetY,
width,
height
} = cover(parentWidth, parentHeight, imageWidth, imageHeight)
// or...
const {
offsetX,
offsetY,
width,
height
} = contain(parentWidth, parentHeight, imageWidth, imageHeight)
ctx.drawImage(image, offsetX, offsetY, width, height)
Canvas image fitting canvas like background-size cover and contain
const coverImg = (img, type) => {
const imgRatio = img.height / img.width
const winRatio = window.innerHeight / window.innerWidth
if ((imgRatio < winRatio && type === 'contain') || (imgRatio > winRatio && type === 'cover')) {
const h = window.innerWidth * imgRatio
ctx.drawImage(img, 0, (window.innerHeight - h) / 2, window.innerWidth, h)
}
if ((imgRatio > winRatio && type === 'contain') || (imgRatio < winRatio && type === 'cover')) {
const w = window.innerWidth * winRatio / imgRatio
ctx.drawImage(img, (win.w - w) / 2, 0, w, window.innerHeight)
}
}
Codepen demo
Usage:
coverImg(myImage, 'cover');
coverImg(myImage, 'contain');
Try this (based on @daviestar's answer):
getCanvas = function(img, w, h) {
// Create canvas
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
// Set width and height
canvas.width = w;
canvas.height = h;
// Draw the image
let containerRatio = h / w;
let width = img.naturalWidth;
let height = img.naturalHeight;
let imgRatio = height / width;
if (imgRatio > containerRatio) { // image's height too big
height = width * containerRatio;
} else { // image's width too big
width = height / containerRatio;
}
let s = {
width: width,
height: height,
offsetX: (img.naturalWidth - width) * .5,
offsetY: (img.naturalHeight - height) * .5
};
ctx.drawImage(img, s.offsetX, s.offsetY, s.width, s.height, 0, 0, w, h);
return canvas;
}
The below script is a reference from @user1693593, and I do some modifications as below
- use Destructuring assignment to make the options more flexible
- The script provides a runnable example, so you don't worry the link is not found.
<script>
function clamp(num, a, b) {
return num > b ? b
: num < a ? a
: num
}
/**
* @param {CanvasRenderingContext2D} ctx
* @param {HTMLImageElement} img
* @param {Number} dx
* @param {Number} dy
* @param {Number} dw
* @param {Number} dh
* @param {Number} offsetX
* @param {Number} offsetY
* */
function drawImageProp(ctx, img, {dx = 0, dy = 0, dw = undefined, dh = undefined, offsetX = 0.5, offsetY = 0.5}) {
dw = dw ?? ctx.canvas.width
dh = dh ?? ctx.canvas.height
// keep bounds [0.0, 1.0]
offsetX = clamp(offsetX, 0, 1)
offsetY = clamp(offsetY, 0, 1)
let iw = img.width,
ih = img.height,
ratio = Math.min(dw / iw, dh / ih),
nw = iw * ratio,
nh = ih * ratio, // new prop. height
sx, sy, sw, sh, ar = 1;
// decide which gap to fill
if (nw < dw) ar = dw / nw
if (Math.abs(ar - 1) < 1e-14 && nh < dh) ar = dh / nh // updated
nw *= ar
nh *= ar
// source rectangle
sw = iw / (nw / dw)
sh = ih / (nh / dh)
sx = (iw - sw) * offsetX
sy = (ih - sh) * offsetY
// make sure source rectangle is valid
if (sx < 0) sx = 0
if (sy < 0) sy = 0
if (sw > iw) sw = iw
if (sh > ih) sh = ih
img.onload = (event) => {
// fill image in dest. rectangle
ctx.drawImage(event.target, sx, sy, sw, sh, dx, dy, dw, dh)
}
}
// Test Only
本文标签：
javascriptSimulation backgroundsize cover in canvasStack Overflow
版权声明：本文标题：javascript - Simulation background-size: cover in canvas - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：http://www.betaflare.com/web/1736973699a1958242.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论