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尺寸，然后执行下载。其工作方式如下：

生成一个空的canvas元素
生成图像，并在其中加载原始图像元素源
使用原始图像尺寸将新图像的内容转储到画布中。
将画布的内容转储回原始图像元素
执行download（）函数（仅适用于chrome）

SELECT OpenPrice as Price FROM Prices WHERE SampleTime = '09:30:00'
union
Select ClosePrice as Price from Prices where SampleTime ='15:59:00';

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) )
   }
 })

使用JavaScript，我可以将图像保存为CSS缩略图大小吗？

1 个答案: