问题标签 [image-resizing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
3153 浏览

sql - how to auto resize image in sql database in a table

I have a question, I have a database with some webshop products. I load 2 images from a url (domain.com) one is for the thumb image (product_thumb_image) and the other is a full image. (product_full_image)

I use for both the same url and resize the image by having a Height="100" attribute in the image tag.I know this is not the right way, But I don't know a other way to bulk insert images into a webshop without inserting the pictures one by one in the backend of my webshop (virtuemart)

My question: How can I resize a image directly in the database without having to load the full image size and having it resized by a Height="100" attribute?

Below is a small part of the database, maybe someone has an idea to (auto) resize the image which is in the product_thumb_image table.

0 投票
1 回答
374 浏览

image - 如何生成拇指图像?

我有一个包含大约 20000 张图像的文件夹,我需要为它们生成拇指图像。

完成这项工作的最快方法是什么?

我知道我可以使用一些图像大小调整库来做到这一点。但我想知道也许已经有一个工具或代码片段可以完成这项工作。

0 投票
5 回答
64050 浏览

html - 如何在保持比例的同时调整纯 HTML/CSS 中的图像大小?

如何仅使用 HTML/CSS(即无服务器代码)调整图像大小,同时保持其比例并具有裁剪效果。详细信息:我希望将其调整为指定的宽度,保持比例,如果高度大于指定值,则将其裁剪到指定的高度?

实际上,我知道如何使用一些服务器代码来做到这一点,但我不想这样做。这意味着使用不同的文件引用并引用图片,例如<img src="picture.php" />. 我需要在显示它的同一页面中处理图像。

让我“困扰”的是我必须发送图像标题,因此页面上不会显示其他任何内容。

有没有办法做这样的事情?也许来自纯 HTML/CSS?:P

我做了一个函数来做类似的事情(除了“裁剪”的东西),它只返回width="" height="",我像这样使用它<img src="image.jpg" resize("image.jpg") />,但我不明白我怎么能做那个裁剪......

谢谢

0 投票
8 回答
23153 浏览

image - 通过动态调整大小提供图像

我的公司最近开始遇到我们网站的图像处理问题。

我们有几个网站(成人娱乐)显示像 dvd 封面、快照和类似的图像。我们有大约 100,000 部电影,每部电影平均有 30 张快照和封面。几乎每张图片都有一个针对非会员的带有模糊和叠加功能的附加版本,这导致每部电影大约有 50 张图片或总共 500 万张基本图片。每个图像都有多个版本,具体取决于它在页面上的位置(缩略图、原始图像、小预览、不太小的预览、顶部列表中的小图像等),这会导致比我想数数。

现在我有了使用服务器即时生成图像的想法,因为为所有不同的页面生成所有不同的图像变得非常笨拙(因为不同的页面有时甚至需要不同的图像大小来完成基本相同的任务) .

有谁知道可以即时缩小图像的图像处理服务器,所以我们只需要提供原始图像,网络人员可以请求他们需要的任何大小?

要求:

  • 非常高性能(每天几千名用户)
  • 动态模糊和叠加创建
  • 即时调整大小(保持和不保持纵横比)
  • 可以处理数百万张图片
  • 必须能够读取 JPG、GIF、PNG 和 BMP 并在它们之间进行转换

安全性不是那么大的问题,因为 URL 操作已经可以达到未模糊的图像,并且更多的安全性会很好,但它不是必需的,坦率地说,我停止关心(在未能进入我的同事的头脑之后为什么(对于我们的小型经销商页面)使用http://example.com/view_image.php?filename=/data/images/01020304.jpg显示图像是个坏主意)。

我们尝试了 PHP 脚本来执行此操作,但对于这么多用户来说性能太慢了。

提前感谢您的任何建议。

0 投票
19 回答
303801 浏览

javascript - 在 HTML5 画布中调整图像大小

我正在尝试使用 javascript 和画布元素在客户端创建缩略图,但是当我缩小图像时,它看起来很糟糕。它看起来好像在 Photoshop 中缩小了尺寸,将重采样设置为“最近邻”而不是双三次。我知道让它看起来正确是可能的,因为这个网站也可以使用画布很好地做到这一点。我尝试使用与“[Source]”链接中显示的相同的代码,但它看起来仍然很糟糕。有什么我遗漏的东西,需要设置的一些设置吗?

编辑:

我正在尝试调整 jpg 的大小。我曾尝试在链接网站和 Photoshop 中调整相同 jpg 的大小,缩小后看起来还不错。

以下是相关代码:

编辑2:

似乎我弄错了,链接的网站在缩小图像尺寸方面并没有做得更好。我尝试了建议的其他方法,但没有一个看起来更好。这就是不同方法的结果:

Photoshop:

alt text

帆布:

alt text

带有图像渲染的图像:optimizeQuality 设置并按宽度/高度缩放:

alt text

带有图像渲染的图像:optimizeQuality 设置并使用 -moz-transform 进行缩放:

alt text

在 pixastic 上调整画布大小:

alt text

我想这意味着 Firefox 没有像预期的那样使用双三次采样。我只需要等到他们真正添加它。

编辑3:

原始图像

0 投票
2 回答
2710 浏览

c# - 使用 C# 图形类调整图像大小时的质量问题

我正在将小图像(例如 20x25)调整为更大的图像(例如 150x170)。我的问题与质量无关,正如预期的那样,质量有些模糊。我的问题是边框是在图像的右侧和底部创建了浅色边框。有没有办法可以删除它?

我的代码如下:

谢谢!

0 投票
2 回答
1238 浏览

google-app-engine - GAE images.resize 固定比例裁剪

我需要从各种尺寸和纵横比调整并裁剪到 60x80 像素。就在我放入数据存储区之前。任何人都已经解决了这个问题。

目前我已经成功地将它转换为具有各种宽度的精确高度(80px),当我尝试在列表上显示它时看起来不太好。例如 jcaroussel。

我的 db.put 代码如下所示:

当我们在 google talk/google chat 上上传我们的头像时,我只想做类似的结果。

有人解决了这个问题吗?

谢谢

0 投票
2 回答
664 浏览

c# - 在 C# 中调整单色图像的大小

我有以下代码使用以下代码调整单色图像的大小(因此像素值为 0 [黑色] 或 255 [白色])

我遇到的问题是,在调整大小(我正在放大图像)之后,一些像素值变为 254、253、1、2 等(因此不是单色的。)我需要这种情况不会发生。这可能吗,也许是通过更改 Graphins 属性之一?

0 投票
4 回答
16858 浏览

php - PHP图像动态调整大小与存储调整大小的图像

我正在构建一个图像共享站点,并想知道使用 PHP 动态调整图像大小并存储调整后的图像的优缺点。

哪个更快?

哪个更可靠?

两种方法在速度和性能上的差距有多大?

请注意,无论哪种方式,图像都通过 PHP 脚本进行统计,例如视图,或者是否允许热链接等......所以如果我选择存储调整大小的图像,它不会是图像的直接链接。

我会感谢您的评论或有关该主题的任何有用链接。

0 投票
1 回答
3376 浏览

jquery - jQuery:如何平滑动画图像大小调整

我是一个 jQuery 菜鸟 - 所以请原谅这个问题可能很基础。

我正在做一些非常简单的事情 - 悬停动画图像的位置和大小。当您将鼠标悬停在图像上时,会出现一些明显的“锯齿”(在 FF、chrome、safari 和其他糟糕的浏览器中)——有没有办法摆脱这种情况?jquery 代码如下,这里有一个实时链接kristechdev.metropoliscreative.com(将鼠标悬停在图标上)。