更改图像分辨率，但保持物理尺寸 [英] Change image resolution but keep physical size

问题描述

有可能在客户端更改图片的分辨率（使用CSS，Javascript等），但是在屏幕上保持其大小。

is there any possibility to change an image's resolution on clientside (using CSS, Javascript, whatever) but keep it's size on the screen?

示例：以200×100的尺寸显示具有20×10的分辨率的1920×1080图像。只要使用img元素，将源和宽度/高度设置为20x10当然可以工作，但现在我想显示缩放的图像大小为200x100。

Example: I want to dispaly a 1920x1080 image with a resolution of 20x10 at a size of 200x100. Just using a img element, set it's source and width/height to 20x10 surely works, but now I'd like to display the scaled image at a size of 200x100.

推荐答案

你可以使用HTML5 canvas来做到这一点：

You can do this using HTML5 canvas:

给定任何尺寸的原始图像，您要给予 200的大小 x 200 以及 50 x 50 的解决方案：

Given an original image of any size that you want to give a size of 200 x 200 and a resolution of 50 x 50:

1. 画出 50 x 50


2. 使用定义 50的宽度和高度的参数绘制图片


3. 通过CSS放大画布 将其延伸到 200 x 200 。

1. Make a canvas of 50 x 50
2. Draw the image with arguments defining a width and height of 50
3. Enlarge the canvas through CSS to stretch it to 200 x 200.

像这样： http://jsfiddle.net/eGjak/234/ 。

另一方面，HTML5 canvas在我所有的浏览器中使用消除锯齿，没有能力关闭它。

As a side note, HTML5 canvas uses anti-aliasing in all browsers as far as I'm concerned, with no ability to turn that off. So instead of pixelated results you'll have blurry results.

// paint 200x200 image with resolution 50x50
var w = 200,
    h = 200,
    p = 50,
    q = 50;

var img = $("img").get(0);

img.onload = function() {
    cv.width = p;  // set canvas resolution
    cv.height = q;

    ctx.drawImage(img, 0, 0, p, q); // draw image with given resolution

    cv.style.width = w + "px";  // enlarge canvas by stretching
    cv.style.height = h + "px";
};

img.src = "http://www.lorempixum.com/300/300/";

这篇关于更改图像分辨率，但保持物理尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！