Могут ли браузеры создавать изображения с разным разрешением? - PullRequest
Новая
       5

Могут ли браузеры создавать изображения с разным разрешением?

0 голосов
/ 12 июля 2020

Для данного изображения, скажем, в виде файла jpeg, есть ли способ отобразить его на веб-странице в разных разрешениях?

Обратите внимание, что в отличие от вопросов с аналогичной формулировкой, я не речь об изменении размера изображения на странице.

И нет, я не прошу программное обеспечение CSI, которое волшебным образом добавляет детали к изображениям с низким разрешением.

Я хочу примерно следующее:

Три копии Моны Лизы одинакового размера в высоком, среднем и низком разрешении.

, где первое изображение - это исходный файл с высоким разрешением (205 × 304), а остальные - тот же файл, отображаемый со средним (82 × 122) и низким (41 × 61) разрешением.

Есть ли CSS или javascript, которые могут это сделать?

(CSS filter: blur() имеет аналогичный эффект, но это не то, что я хочу (например, без неровностей).)

Ответы [ 2 ]

2 голосов
/ 12 июля 2020

Конечно, вы можете сделать это довольно просто с элементом , просто установите его атрибуты width и height на целевые и нарисуйте на нем свое изображение. Тогда вам просто нужно изменить размер этих полотен с помощью CSS, если вы используете sh: 

function downscale( img, width, height ) {
  const canvas = document.createElement( 'canvas' );
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  return new Promise( (resolve, reject) => {
    if( img.naturalWidth ) { // if already loaded
      draw();
    }
    else {
      img.addEventListener( 'load', draw, { once: true } );
      img.addEventListener( 'error', reject, { once: true } );
    }
    
    function draw() {
      ctx.drawImage( img, 0, 0, width, height );
      resolve( canvas );
    }
  } );
}

const img = document.querySelector( 'img' );
// original image size: 158 * 240
Promise.all( [
  downscale( img, 79, 120 ),
  downscale( img, 40, 60 )
] ).then( (canvases) =>
  document.querySelector( '.img-container' )
    .append( ...canvases )
)
.catch( console.error );
img, canvas { height: 240px }
<div class="img-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Mona_Lisa.jpg/158px-Mona_Lisa.jpg"></div>

Сделать это с помощью CSS возможно только теоретически, например, путем масштабирования с использованием свойств width и height, а затем масштабирования с использованием преобразований , но кажется, что реализации будут просто группировать все операции, а не применять их по одной, и, таким образом, обе операции вместо этого будут просто отменять друг друга.

1 голос
/ 12 июля 2020

Манипуляции с изображением (часто) выполняются путем создания / загрузки <canvas>, рисования изображения на <canvas> и внесения некоторых необходимых изменений. В этом случае просто загрузите изображение в <canvas> и перерисуйте его с другим размером на холсте 2d context.

Фрагмент ниже показывает два варианта: с degradeImage() и без degradeImageOnParent() уже существующих <canvas> в документе.

СТРАННО фрагмент показывает только одно изображение, а за пределами Stackoverflow он показывает четыре: исходное и 3 ухудшенных изображения. Должна быть проблема с загрузкой документа, мы работаем над этим ....

Решено отключено docInit ... 

//document.addEventListener('DOMContentLoaded',docInit);

//function docInit() {
    document.getElementById('source').onload = function () { 
        degradeImage(0.75, this, document.getElementById("cvs1"));
        degradeImage(0.50, this, document.getElementById("cvs2"));

        // Add canvas on-the-fly
        degradeImageOnParent(document.getElementById('parent'),0.25,this,'cvs3');
    };
//};

function degradeImage(scale,img,cvs) {
    if (!cvs) { // if not passed, create canvas on-the-fly
        cvs = document.createElement('canvas');
    }
    var ctx = cvs.getContext('2d');

    cvs.width  = img.width  * scale; // assign scaled size
    cvs.height = img.height * scale;

    ctx.imageSmoothingEnabled = true; // default value, here for reference only
    ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // fill the canvas
    
    return cvs; // Useful when created inside function
}

function degradeImageOnParent(parent,scale,img,cvsID) {
    var cvs = degradeImage(scale,img);
    if (cvsID) cvs.id = cvsID; // [optional ID]
    parent.appendChild(cvs);
}
.wrapper   { width: 100% }
canvas,img { width:  24% } /* original is 400x600 */
<div class="wrapper" id="parent">
    <img id="source" src="https://i.postimg.cc/76JT0MBh/Mona-Lisa-400.jpg">
    <canvas id="cvs1"></canvas>
    <canvas id="cvs2"></canvas>
</div>
...