[英]JS - Center Image inside canvas element
I'm scaling the image down so it fits inside the canvas, the thing I am struggling to do is to then center it inside of the canavas element, does anyone know how this could be done please?我正在缩小图像以使其适合画布内,我正在努力做的事情是将其居中在画布元素内,有谁知道如何做到这一点? Any help would be appreciated
任何帮助将不胜感激
https://jsfiddle.net/n7xL5c37/ https://jsfiddle.net/n7xL5c37/
var canvas = document.getElementById('canvas');
var image = new Image();
image.src = 'http://placehold.it/300x550';
image.onload = function () {
var canvasContext = canvas.getContext('2d');
var wrh = image.width / image.height;
var newWidth = canvas.width;
var newHeight = newWidth / wrh;
if (newHeight > canvas.height) {
newHeight = canvas.height;
newWidth = newHeight * wrh;
}
canvasContext.drawImage(image,0,0, newWidth , newHeight);
};
var canvas = document.getElementById('canvas'); var image = new Image(); image.src = 'http://placehold.it/300x550'; image.onload = function () { var canvasContext = canvas.getContext('2d'); var wrh = image.width / image.height; var newWidth = canvas.width; var newHeight = newWidth / wrh; if (newHeight > canvas.height) { newHeight = canvas.height; newWidth = newHeight * wrh; } var xOffset = newWidth < canvas.width ? ((canvas.width - newWidth) / 2) : 0; var yOffset = newHeight < canvas.height ? ((canvas.height - newHeight) / 2) : 0; canvasContext.drawImage(image, xOffset, yOffset, newWidth, newHeight); };
<canvas id="canvas" width="500" height="500" style="border: 1px solid black" />
A solution that will work for both horizontal and vertical.适用于水平和垂直的解决方案。
First find the scale which is the min scale to fit the width or height首先找到适合宽度或高度的最小比例尺
var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
Use that scale to get the img width and height使用该比例来获取 img 的宽度和高度
var w = img.width * scale;
var h = img.height * scale;
Then use that scale to calculate the top left as half the dist from the center然后使用该比例将左上角计算为距中心距离的一半
var left = canvas.width / 2 - w / 2;
var top = canvas.height / 2 - h / 2;
Solution of Passersby works fine if you want something similar to object-fit: contain
如果你想要类似于
object-fit: contain
contains 的东西,Passersby 的解决方案工作正常
This solution works fine if you want object-fit: cover
如果您想要
object-fit: cover
此解决方案工作正常object-fit: cover
const fitImageToCanvas = (image,canvas) => {
const canvasContext = canvas.getContext("2d");
const ratio = image.width / image.height;
let newWidth = canvas.width;
let newHeight = newWidth / ratio;
if (newHeight < canvas.height) {
newHeight = canvas.height;
newWidth = newHeight * ratio;
}
const xOffset = newWidth > canvas.width ? (canvas.width - newWidth) / 2 : 0;
const yOffset =
newHeight > canvas.height ? (canvas.height - newHeight) / 2 : 0;
canvasContext.drawImage(image, xOffset, yOffset, newWidth, newHeight);
};
You can get the element like:你可以得到这样的元素:
var ctx = document.getElementById('digitalrain').getContext('2d');
and set x and y of your image like:并将图像的 x 和 y 设置为:
ctx.drawImage(img, width/2-img.width/2, height/2-img.height/2);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.