Question

我正在制作一个客户端拖放文件上传脚本作为书签。在上传之前，我使用File API将图像读取为base64格式并将其显示为缩略图。

这是我的缩略图的样子。我希望它们看起来更方正，但不会失去它们的宽高比。（请忽略进度条） wide thumbnails

这就是我想要缩略图的样子，它们居中并根据min（高度，宽度）进行裁剪。 square thumbnails

我是否可以仅使用javascript（通过脚本更改样式）？请尝试确保您的解决方案适合base64图像（在通过文件API读取图像作为DATA URL之后）。

我上传了这些精确的图片集here。

感谢您的帮助。

Answer 1

只想分享我如何解决我的问题。因为我只想要一个纯粹的javascript解决方案，所以我使用了一次性画布元素来做脏工作。

以下是我的相同代码：

function resizeImage(url, width, height, callback, file) {
  console.log("In_resizeImage");
  var sourceImage = new Image();

  sourceImage.onload = (function (f) {
      return function (evt) {
        console.log("In_sourceImage_onload");
        console.log("sourceImage.width:" + sourceImage.width);
        console.log("sourceImage.height:" + sourceImage.height);
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        if (sourceImage.width == sourceImage.height) {
          canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);
        } else {
          minVal = Math.min(sourceImage.width, sourceImage.height);
          if (sourceImage.width > sourceImage.height) {
            canvas.getContext("2d").drawImage(sourceImage, (sourceImage.width - minVal) / 2, 0, minVal, minVal, 0, 0, width, height);
          } else {
            canvas.getContext("2d").drawImage(sourceImage, 0, (sourceImage.height - minVal) / 2, minVal, minVal, 0, 0, width, height);
          }
        }
        callback(canvas.toDataURL(), f);
      }
    })(file);

  sourceImage.src = url;
}

我直接处理图像文件，所以我能够使用Image对象。对于其他人来说，可能需要进行一些调整。

Answer 2

Instanciate另一个html元素（我会选择一个表，但我已经过时了）并将图片作为背景图片与CSS对齐，类似

thetable {background：url（'planets.jpg'）0px -150px no-repeat; 宽度：60像素;身高60像素

我从这里偷走了所有这些：How to create CSS-sprites

Answer 3

您还可以使用drawImage（）直接将图像中的中心方块“剪切”到画布上，您只需要放置这些参数：

canvas.getContext（ “2D”）的drawImage（IMG，SX，SY，swidth，sheight，X，Y，宽度，高度）;

sx可选。 x坐标从哪里开始裁剪

sy可选。 y坐标从哪里开始裁剪

swidth可选。剪裁图像的宽度

sheight可选。剪裁图像的高度

x坐标将图像放在画布上的x坐标

y y坐标将图像放在画布上的位置

宽度可选。要使用的图像宽度（拉伸或缩小图像）

height可选。要使用的图像高度（拉伸或缩小图像）

此致

皮埃里克

Answer 4

这应该支持图像和视频。它将为媒体创建缩略图，但也将保持媒体宽高比。

这也应该自行清理，因此不应该持续发生事件泄漏。它还将平滑缩略图图像。

/* example to resize an image to 300px width 
and keep the aspect */ 
resizeMedia('/images/logo.jpg', 300, function(data)
{
    console.log(data); // the new thumbnail data uri 
});  


/* this will create a thumbnail of an image or video 
and keep the aspect. 
@param (string | object) media = the image string or video object 
@param (int) width = the new width to contain the media 
@param (function) callBack = the callBack to handle the 
image data uri */ 
function resizeMedia(media, width, callBack) 
{
    var self = this; 

    /* this will get the type by checking ifthe media 
    is a string (e.g. img src or dataUri) */ 
    var type = typeof media === 'string'? 'image' : 'video'; 

    /* this will get the height and width of the resized 
    media and keep the aspect. 
    @param (int) udateSize = the width the modify 
    @param (int) width = the old width 
    @param (int) height = the old height 
    @return (object) the width and height to modify the 
    media */ 
    var getModifySize = function(updateSize, width, height) 
    { 
        var getModifyAspect = function(max, min, value)
        {
            var ratio = max / min;
            return value * ratio;
        };   

        return { 
            width: updateSize,
            height: getModifyAspect(updateSize, width, height) 
        }; 
    }; 

    /* this will create a canvas and draw the media 
    on the canvas. 
    @param (object) media = the image or video 
    object 
    @param (int) width = the canvas width
    @param (int) height = the canvas height 
    @return (object) the new canvas */ 
    var createCanvas = function(media, width, height)
    { 
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d"); 

        canvas.width = width;
        canvas.height = height;

        ctx.mozImageSmoothingEnabled = true;
        ctx.webkitImageSmoothingEnabled = true;
        ctx.msImageSmoothingEnabled = true;
        ctx.imageSmoothingEnabled = true;

        /* we need to draw on load to make sure
        the image is ready to be used */
        ctx.drawImage(media, 0, 0, width, height);

        /* this will convert the canvas to a data uri
        using jpeg to speed up the process. if you need 
        to keep transparency remove the mime type 
        and it will default to png */ 
        callBack(canvas.toDataURL('image/jpeg'));

        return canvas; 
    }; 

    if(type === 'image') 
    { 
        var img = new window.Image();
        img.crossOrigin = "anonymous";
        img.addEventListener('load', function loadImage() 
        {
            var modify = getModifySize(width, img.width, img.height);

            createCanvas(img, modify.width, modify.height); 
            img.removeEventListener('load', loadImage);
        });

        img.src = media;
    } 
    else if(type === 'video') 
    { 
        var modify = getModifySize(width, media.videoWidth, media.videoHeight);
        createCanvas(media, modify.width, modify.height);
    }
};

在javascript中创建图像的缩略图方块（不会丢失宽高比）

4 个答案: