标签: image-resizing

有没有办法使用ONLY CSS按比例调整大小(缩小)图像？

我正在做JavaScript方式,但只是想看看CSS是否可行.

我正在尝试使用javascript和canvas元素在客户端创建缩略图图像,但是当我缩小图像时,它看起来很糟糕.它看起来好像在photoshop中缩小了,重新采样设置为"最近邻"而不是Bicubic.我知道可以让它看起来正确,因为这个网站也可以使用画布做得很好.我尝试使用他们所做的相同代码,如"[Source]"链接所示,但它仍然看起来很糟糕.有什么我缺少的东西,一些需要设置的设置或什么？

编辑:

我正在尝试调整jpg的大小.我已经尝试在链接网站和photoshop中调整相同的jpg,并且在缩小尺寸时看起来很好.

这是相关代码:

reader.onloadend = function(e)
{
    var img = new Image();
    var ctx = canvas.getContext("2d");
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");

    img.onload = function()
    {
        var ratio = 1;

        if(img.width > maxWidth)
            ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
            ratio = maxHeight / img.height;

        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
        copyContext.drawImage(img, 0, 0);

        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); …

我有一个网站(g-floors.eu),我想让背景(在css我已经定义了内容的bg图像)也响应.不幸的是我真的不知道如何做到这一点,除了我能想到的一件事,但这是一个很好的解决方法.创建多个图像,然后使用CSS屏幕大小来更改图像,但我想知道是否有更实用的方法来实现这一目标.

基本上我想要实现的是图像(带有水印'G')自动调整大小而不显示较少的图像.如果可能的话

链接:g-floors.eu

我到目前为止的代码(内容部分)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

我有一个垂直的LinearLayout,其中一个项目是ImageView使用Picasso加载的.我需要将图像的宽度提升到整个设备宽度,并显示图像的中心部分被固定高度(150dp)裁剪.我目前有以下代码:

Picasso.with(getActivity()) 
    .load(imageUrl) 
    .placeholder(R.drawable.placeholder) 
    .error(R.drawable.error) 
    .resize(screenWidth, imageHeight)
    .centerInside() 
    .into(imageView);

我应该把哪个值成screenWidth和imageHeight(= 150dp)？

当我将图像加载到标记的图标属性时,它以原始大小显示,这比它应该大得多.

我想调整标准尺寸到更小的尺寸.做这个的最好方式是什么？

码:

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}

我已按照调整EC2卷大小的步骤进行操作

1. 停止了实例
2. 拍摄当前音量的快照
3. 在上一个快照中创建了一个新卷,在同一区域中具有更大的大小
4. 从实例中删除旧卷
5. 将新卷附加到同一安装点的实例

旧卷为5GB,我创建的卷为100GB现在,当我重新启动实例并运行时df -h I仍然看到这个

Filesystem            Size  Used Avail Use% Mounted on
/dev/xvde1            4.7G  3.5G 1021M  78% /
tmpfs                 296M     0  296M   0% /dev/shm

这是我跑步时得到的

sudo resize2fs /dev/xvde1

The filesystem is already 1247037 blocks long.  Nothing to do!

如果我跑,cat /proc/partitions我明白了

 202       64  104857600 xvde
 202       65    4988151 xvde1
 202       66     249007 xvde2

根据我的理解,如果我遵循正确的步骤xvde应该具有与xvde1相同的数据,但我不知道如何使用它

如何使用新卷或卸载xvde1并挂载xvde？

我无法理解我做错了什么

我也试过了 sudo ifs_growfs /dev/xvde1

xfs_growfs: /dev/xvde1 is not a mounted XFS filesystem

顺便说一下,这是一个带有centos 6.2 x86_64的linux盒子

在此先感谢您的帮助

我想写一些PHP代码,自动调整通过表单上传到147x147px的任何图像,但我不知道如何去做(我是一个相对的PHP新手).

到目前为止,我已成功上传图片,识别文件类型并清理名称,但我想将调整大小功能添加到代码中.例如,我有一个2.3MB的测试图像,尺寸为1331x1331,我希望代码可以缩小尺寸,我猜测它也会大大压缩图像的文件大小.

到目前为止,我有以下内容:

if ($_FILES) {
                //Put file properties into variables
                $file_name = $_FILES['profile-image']['name'];
                $file_size = $_FILES['profile-image']['size'];
                $file_tmp_name = $_FILES['profile-image']['tmp_name'];

                //Determine filetype
                switch ($_FILES['profile-image']['type']) {
                    case 'image/jpeg': $ext = "jpg"; break;
                    case 'image/png': $ext = "png"; break;
                    default: $ext = ''; break;
                }

                if ($ext) {
                    //Check filesize
                    if ($file_size < 500000) {
                        //Process file - clean up filename and move to safe location
                        $n = "$file_name";
                        $n = ereg_replace("[^A-Za-z0-9.]", "", $n);
                        $n = strtolower($n);
                        $n = "avatars/$n";
                        move_uploaded_file($file_tmp_name, $n); …

我正在Node.js(+ express 4)上开发一个Web应用程序,用户可以通过将其上传到服务器来设置他们的个人资料图像.我们已经限制了文件mimetype和max filesize,因此用户无法上传超过200KB的png或jpeg图像.

问题是我们希望将上传的图像分辨率调整为(服务器端)为200x200,以改善页面加载并节省磁盘空间.经过一些研究,所有答案都指向使用基于ImageMagick或GraphicsMagick的任何模块.

但是,必须安装ImageMagick/GraphicsMagick进行简单的图像调整大小对我来说似乎太过分了,所以,Node.js还有除此之外的其他解决方案吗？

在我的网站上,我想在具有特定大小(width: 600px)的新窗口中显示用户上传的图像.问题是图像可能很大.因此,如果它们比这些更大600px,我想调整它们的大小,保留纵横比.

我尝试了max-widthCSS属性,但它不起作用:图像的大小不会改变.

有什么方法可以解决这个问题吗？

HTML:

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS:

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

我也试过设置max-width: 600px图像,但不起作用.图像从servlet流式传输(存储在Tomcat的webapps文件夹之外).

我有一个URI图像文件,我想减小它的大小上传它.初始图像文件大小取决于从移动设备到移动设备(可以是2MB,可以是500KB),但我希望最终大小约为200KB,以便我可以上传它.
从我读到的,我有(至少)2个选择:

• 使用BitmapFactory.Options.inSampleSize,对原始图像进行二次采样并获得较小的图像;
  
• 使用Bitmap.compress压缩指定压缩质量的图像.
  

什么是最好的选择？

我想最初调整图像宽度/高度,直到宽度或高度高于1000px(类似1024x768或其他),然后压缩图像质量下降,直到文件大小超过200KB.这是一个例子:

int MAX_IMAGE_SIZE = 200 * 1024; // max final file size
Bitmap bmpPic = BitmapFactory.decodeFile(fileUri.getPath());
if ((bmpPic.getWidth() >= 1024) && (bmpPic.getHeight() >= 1024)) {
    BitmapFactory.Options bmpOptions = new BitmapFactory.Options();
    bmpOptions.inSampleSize = 1;
    while ((bmpPic.getWidth() >= 1024) && (bmpPic.getHeight() >= 1024)) {
        bmpOptions.inSampleSize++;
        bmpPic = BitmapFactory.decodeFile(fileUri.getPath(), bmpOptions);
    }
    Log.d(TAG, "Resize: " + bmpOptions.inSampleSize);
}
int compressQuality = 104; // quality decreasing by 5 every loop. (start from 99)
int streamLength = …