如何在画布上设置背景尺寸封面 [英] How to set background size cover on a canvas

问题描述

我正在使用画布对boostrap旋转木马图像进行模糊处理.基本上，轮播图像设置为背景尺寸封面，因此图像将根据窗口尺寸进行裁剪.我想对画布图像做同样的事情.有任何想法吗?谢谢堆！

I'm using a canvas to make blur effect on boostrap carousel images. Basically, carousel images are set to background size cover so image will crop according to window size. I want to do the same to the canvas image. Any ideas? Thanks heaps!

推荐答案

此代码段应该可以解决问题.

This snippet should do the trick.

var aspectheight = h * (canvas.width / w);
var heigthoffset = ((aspectheight - canvas.height) / 2) * -1;
ctx.drawImage(image, 0, heigthoffset, canvas.width, aspectheight);

其中h和w是要渲染的图像的宽度和高度，而image是该图像.

Where h and w are the width and height if the image being rendered, and image is that image.

这篇关于如何在画布上设置背景尺寸封面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！