繁体   English   中英

加载并居中未知尺寸的图像,保持纵横比和填充

Load and center an image of unknown dimensions keeping aspect ratio and padding

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试将通过 KonvasJS 动态添加到画布的图像直接居中。

这是小提琴:

http://jsfiddle.net/71Lw0bk8/7/

我已经找到了代码,但它没有使用 Konva,这是在没有库的情况下尝试这样做,并且它运行良好。

function addImage(imgUrl) {

    const img = new Image();

    img.onload = function () {
        var padding = 20;
        while (img.width + padding > canvas.width || img.height + padding > canvas.height) {
            if (img.width + padding > canvas.width) {
                let newWidth = canvas.width - (padding * 2);
                img.height = Math.round((img.height / img.width) * newWidth);
                img.width = newWidth;
            }
            else if (img.height + padding > canvas.height) {
                let newHeight = canvas.height - (padding * 2);
                img.width = Math.round((img.width / img.height) * newHeight);
                img.height = newHeight;
            }
        }
        ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2, img.width, img.height);
    };
    img.src = imgUrl;
}

我只是不确定如何将其转换为此处:

var uploadedImage = new Konva.Image({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    width: 200,
    height: 200,
    ...

我该怎么做呢?

1 个回复

该技术与普通 JS 相同。 使用 JS 图像的 onload 事件来决定你想要显示什么以及什么尺寸等。一旦所有这些完成,居中的工作就是一个非常标准的矩形逻辑。 请参阅下面的 centerRectShape() 函数。

编辑:添加了更多动态图像大小以丰富片段。

编辑:更改了先前移动的图像源。

 // the x,y position of a rect shape is in fact the top left corner, so to // correcty centre we should consider width and height in the mix. // Konva.Rect and Konva.Image shapes both have x, y being topleft. function centreRectShape(shape){ shape.x( ( stage.getWidth() - shape.getWidth() ) / 2); shape.y( ( stage.getHeight() - shape.getHeight() ) / 2); } // Set up the stage var stage = new Konva.Stage({ container: 'canvas-container', width: 650, height: 300 }); // We draw on layers so create one var layer = new Konva.Layer(); stage.add(layer); var bgRect = new Konva.Rect({width: stage.getWidth(), height: stage.getHeight(), fill: 'gold', opacity: 0.1}); layer.add(bgRect); // we will be uploading an image so make somewhere for it to be displayed later var uploadedImage = new Konva.Image({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, width: 200, height: 200, stroke: 'red', strokeWidth: 10, draggable: false }); // Always have to add shapes to a layer. layer.add(uploadedImage); // use a standard plain old JS image to do the pull of the image from src imgObj = new Image(); // we harness the onload event to know when to update the canvas image imgObj.onload = function() { uploadedImage.image(imgObj); // give the image to the cannvas image object. // since this is a dynamic image upload we want to resize the canvas image object to get // a pleasing effect. var padding = 20; var w = imgObj.width; var h = imgObj.height; // get the aperture we need to fit by taking padding off the stage size. var targetW = stage.getWidth() - (2 * padding); var targetH = stage.getHeight() - (2 * padding); // compute the ratios of image dimensions to aperture dimensions var widthFit = targetW / w; var heightFit = targetH / h; // compute a scale for best fit and apply it var scale = (widthFit > heightFit) ? heightFit : widthFit ; w = parseInt(w * scale, 10); h = parseInt(h * scale, 10); uploadedImage.size({ width: w, height: h }); // Finally position the canvas image object centered. centreRectShape(uploadedImage); layer.draw(); // My favourite thing to forget. } // to start the image load give the object a new src. imgObj.src = 'https://via.placeholder.com/600x280/0000FF/FFFFFF.png?text=Wombats are awsome';
 html, * { margin: 0; padding: 0; } body { background: #eee; } #canvas-container { background: #fff; border-radius: 3px; border: 1px solid #d8d8d8; width: 650px; margin: 0 auto; margin-top: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); } .stickers { padding: 10px 5px; } .stickers > img { margin-right: 10px; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.4.1/konva.min.js"></script> <div id="canvas-container"></div>

1 居中4图像并保持纵横比

我不知道如何使这些图像居中。 我喜欢如何为每个设备调整它们的大小,但希望它们位于中间。 我觉得自己缺少了一些显而易见的东西,但是经过每天1-2小时的一周尝试后,我放弃了。 如果指向我的屏幕截图的链接(中心4图片)有效,则可以看到它们正好适合每台设备,只是没有居中。 **从左 ...

3 调整图像尺寸以保持纵横比

我试图调整图像的大小并保持其宽高比,而位图mBitmap的尺寸为1200x539,因此我需要将其减小到大约1/3。 我发现了Streets Of Boston提供的答案,并尝试在我的应用程序中使用它,但是我可能弄乱了变量,并且得到的图像与原始图像大小相同,有人可以告诉我如何正确实现此目标 ...

4 ImageView填充不同的屏幕尺寸,但保持纵横比

我在图像视图中有一个矩形图像。 我希望在保持宽高比的同时使屏幕中的图像适合不同的屏幕尺寸 。 在较小的屏幕上它的工作正常,但它没有在biggerscreens拉伸。 图像底部仍留有一些空隙。 这是我的代码: 我使用了fill_parent , wrap_content和多 ...

6 将图像放大到全屏,保持纵横比然后居中。

我正在使用jQuery,但是老实说,我不是100%地确定这完全是jQuery问题。 该插件用于画廊/滑块,但这可能无关紧要。 我提到它以防有人好奇。 来吧...我有一个图像,决定高度和宽度,这是需要重置为全屏宽度的宽度。 我想保持宽高比,这样在调整宽度大小时,图像的高度变得大于屏 ...

7 在保持纵横比的同时将图像放在自举轮播中居中并填充整个轮播?

我有一个引导轮播,可填充整个浏览器窗口,并且我希望图像适合整个轮播。 我完成了填充并维护了正确的纵横比部分。 码: CSS: 但是,问题在于图像没有居中,并且在较小的屏幕上看起来有点奇怪,因为您所看到的只是背景的一部分,而不是主要图形。 有任何想法吗? 编辑 ...

8 如何拉伸图像以填充
同时保持图像的纵横比?

我需要将此图像拉伸到可能的最大尺寸,而不会溢出它的&lt;div&gt;或扭曲图像。 我无法预测图像的纵横比,因此无法知道是否使用: 要么 我不能同时使用两者(即 style="width: 100%; height: 100%;"),因为这会拉伸图像以适应&lt;div&gt; 。 ...

10 如何通过保持纵横比填充ImageView中的图像?

我在同一主题上看到了很多问题,并尝试使用 我的图像仍然按原样显示。如果我更改 android:scaleType =“ fitCenter” 以使fitXY正常工作。但是根据文档,此比例不能保持宽高比。那么如何更改代码以使其正常工作? ![在此处输入图像描述] ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM