更改图像分辨率，但保持物理尺寸

问题描述

有可能在客户端更改图片的分辨率（使用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.

像这样：。

另一方面，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/";

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