模拟背景尺寸：覆盖在画布中
Posted
技术标签:
【中文标题】模拟背景尺寸：覆盖在画布中【英文标题】：Simulation background-size: cover in canvas 【发布时间】：2014-03-24 14:03:07 【问题描述】：我正在这样的画布上绘制图像：
ctx.drawImage(data[i].image, data[i].pos.x, data[i].pos.y, data[i].pos.w, data[i].pos.h);
图片被拉长了，我不想要这个。如何模拟 CSS 属性？
background-size: cover
在画布上绘制图像时？
http://www.w3schools.com/cs-s-ref/playit.asp?filename=playcss_background-size&preval=cover
看看100% 100%（我目前拥有的）和cover（我的目标）之间的区别。
【问题讨论】：
【参考方案1】：获得封面功能有点复杂，但这里有一个解决方案：
Demo
于 2016 年 4 月 3 日更新以解决特殊情况。另请参阅下面@Yousef 的评论。
/**
* 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);
现在你可以这样称呼它：
drawImageProp(ctx, image, 0, 0, width, height);
它会按比例缩放图像以适合该容器。
使用最后两个参数来偏移图像：
var offsetX = 0.5; // center x
var offsetY = 0.5; // center y
drawImageProp(ctx, image, 0, 0, width, height, offsetX, offsetY);
希望这会有所帮助！
【讨论】：
我发现这是一个很好的起点，但是需要注意一些与浮点精度相关的错误。例如，假设维度为 728，比率为 0.25686813186813184；结果是 186.99999999999997，实际画布宽度是 187，所以检查高度/宽度是否小于宽度/高度将是正确的，因此纵横比在不应该发生变化时发生变化。我发现最好的方法是用 parseInt 和 toFixed 包装我的十进制数，如下所示：parseInt(num.toFixed(8))。 很好的答案！我注意到 JS 中的浮点数可能存在一些问题。例如，img.width=225，img.height=400，w=58，h=58。在 Chrome 中，它会调整到错误的尺寸。我已经通过将if (nw < w) ar = w / nw; if (nh < h) ar = h / nh; 更改为if (Math.round(nw) < w) ar = w / nw; if (Math.round(nh) < h) ar = h / nh; 解决了这个问题，但不确定这是否是最干净的解决方案
在某些情况下，如果您使用的是已在 DOM 中渲染的图像，则画布的结果可能无法完全模拟背景覆盖。要解决此问题，请使用img.naturalWidth 和img.winHeight 而不是img.width 和img.height。您将确定该值基于原始图像的宽度和高度。 （只是不兼容 IE8 及更低版本）
演示页面似乎不再可用
演示页面不可用，但无论如何您的代码对我帮助很大。谢谢【参考方案2】：
如果您正在寻找适用于大多数情况的更简单的解决方案，并且还包含类似 css contain 的功能，请尝试以下操作：
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)
intrinsic-scale 的略微修改版本，包括缩放和偏移
用法：
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)
【讨论】：
【参考方案3】：画布图像适合画布，如背景大小的封面和包含
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
用法：
coverImg(myImage, 'cover');
coverImg(myImage, 'contain');
【讨论】：
【参考方案4】：试试这个（基于@daviestar 的回答）：
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;
【讨论】：
【参考方案5】：下面的脚本是来自@user1693593的引用，我做了一些修改如下
使用Destructuring assignment 使选项更加灵活 该脚本提供了一个可运行的示例，因此您不必担心找不到链接。<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 ?
window.onload = () =>
const testArray = [
["Default", (ctx, img)=>drawImageProp(ctx, img, )],
["Full", (ctx, img)=>drawImageProp(ctx, img, offsetY:0)], // If you don't want to it cutting from two sides, you can set "offsetY = 0" then it will cut a large part from the bottom
["1/2",(ctx, img)=>drawImageProp(ctx, img, dx:window.innerWidth/4, dy:window.innerHeight/4, dw: window.innerWidth/2, dh:window.innerHeight/2)],
["3/4",(ctx, img)=>drawImageProp(ctx, img, dx:window.innerWidth/8, dy:window.innerHeight/8, dw: window.innerWidth*3/4, dh:window.innerHeight*3/4)]
]
for (const [testName, drawFunc] of testArray)
const btn = document.createElement("button")
btn.innerText = testName
btn.onclick = () =>
document.querySelectorAll(`canvas`).forEach(e=>e.remove()) // remove old data
const img = new Image(590, 470)
img.src = "https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg"
const canvas = document.createElement("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext("2d")
drawFunc(ctx, img)
document.querySelector(`body`).append(canvas)
document.querySelector(`body`).append(btn)
</script>【讨论】：
以上是关于模拟背景尺寸：覆盖在画布中的主要内容，如果未能解决你的问题，请参考以下文章