Используя JavaScript, могу ли я сохранить изображения в формате CSS с уменьшенными размерами?

Question

Возможно, странный вариант использования, но предположим следующий код, где image1.jpg - 1920x1080:

<a href="http://example.com/dir/photos/image1.jpg" target="_blank">
    <img src="http://example.com/dir/photos/image1.jpg">
</a>

Как видите, изображение полностью загружается на страницу; однако выше не показан CSS, который используется для отображения этого изображения в виде эскиза на странице (скажем, 480 x 270).

Да, это ужасно неоптимизированная практика.

Проблема, с которой я сталкиваюсь, заключается в том, что у клиента сотни таких случаев, происходящих на нескольких страницах. Я пытаюсь быстро создавать уменьшенные версии изображений в точности по размеру на странице. Некоторые изображения шире / выше, чем другие, и имена изображений / папок повсюду, поэтому создание миниатюр каждого изображения на отображаемой странице - это то, что мне нужно для достижения цели.

В идеале, я думаю об использовании JS (или jQuery, если кто-нибудь знает какие-либо конкретные методы) для нацеливания на все изображения (однако это должно произойти), чтобы в конечном итоге создавать и загружать / сохранять миниатюры в качестве их CSS-размера на представления.

Надеюсь, этот вопрос имеет смысл. Я был бы рад уточнить больше, если это будет необходимо. Спасибо за любую помощь, вы можете предоставить!

Answer 1

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

1. Создает пустой элемент canvas
2. Создает изображение и загружает в него исходный источник элемента изображения
3. Сбрасывает содержимое нового изображения на холсте, используя исходные размеры изображения.
4. Сбрасывает содержимое холста обратно в исходный элемент изображения
5. Выполняет функцию загрузки () (работает только в Chrome)

function scaleToElementSize(img){
  return new Promise( (resolve,reject)=>{
    // create an empty canvas and assign to it
    // the rendered proportions of the provided image 
    let c = document.createElement('canvas');
    c.height = img.height;
    c.width = img.width ;
    const ctx = c.getContext("2d");

    // create an image element, and load the source
    // image in it
    let i = new Image();
    i.setAttribute('crossOrigin', 'anonymous');
    i.src = img.src;

    // when image is loaded, copy its contenta scaled     
    // into the canvas, dump the resulting scaled
    // image back, to the original image, and download
    i.onload = ()=>{
       ctx.drawImage(i, 0, 0, c.width, c.height); 
       img.setAttribute('filename', img.src);
       img.onload = null;
       img.src =  c.toDataURL("image/png");
       resolve();
    }
  });
}

function download(img){
  var link = document.createElement('a');
  link.download = img.getAttribute('filename');
  link.href = img.src.replace("image/png", "image/octet-stream");;
  link.click();
}

 document.querySelectorAll('img').forEach( img=>{
   img.onload= function(){ 
     scaleToElementSize(img)
     .then( ()=> download(img) )
   }
 })

<img src="https://placekitten.com/200/286?a.jpg" width="100">
<img src="https://placekitten.com/200/139?b.jpg" width="200">
<img src="https://placekitten.com/408/287?c.jpg" width="110">