css - 生成不同大小的图像

Question

有谁知道 Facebook、Pinterest 和 Twitter 如何保存给定图像的不同尺寸的图像。例如，Facebook 将给定的图像缩放为 4 种不同的尺寸并存储它们。 Pinterest 保留了两种尺寸的图片(一种是 236px，另一种是 736px)； tumblr 对不同的值做同样的事情。我正在尝试做同样的事情，但我没有得到正确的结果。在 python 中，使用图像库(来自 PIL)，如果我使用调整大小，图像会被拉伸(stretch)，如果我使用缩略图，我会根据纵横比而不是我想要的尺寸(例如 300px x 300px)获得图像。

如果您查看一个人的 Facebook 个人资料图片，它会从 520 像素 x 520 像素缩放到 160 像素 x 160 像素，但没有为此进行裁剪。如果有人知道如何实现这一目标，我真的很想知道

Answer 1

我想这可能对你有帮助 Demo

HTML

<section>
    <form>
        <div class="options">
            <label for="width">Width:</label>
            <input id="width" type="number" name="width" value="100">
            <label for="height">Height:</label>
            <input id="height" type="number" name="height" value="100">
            <input type="checkbox" id="crop">
            <label for="crop">crop thumbnail</label> <span class="crop"><label for="bg">background:</label><input type="text" value="white" id="bg"></span>

            <input type="checkbox" id="jpeg">
            <label for="jpeg">JPG</label> <span class="jpeg"><label for="quality">Quality</label>
    <input type="number" max="100" min="0" value="50" id="quality"> %</span>

        </div>
        <div id="dropzone">This demo needs a canvas and FileReader capable browser</div>
    </form>
    <output>
         <h2>Thumbnails (click to remove, hover to see filesize)</h2>

    </output>
</section>

js

/*
  canvasthumber by Christian Heilmann
  Version: 1.0
  Homepage: http://thewebrocks/demos/canvasthumber
  Copyright (c) 2012, Christian Heilmann
  Code licensed under the BSD License:
  http://wait-till-i.com/license.txt
*/
(function () {
    var s = document.querySelector('#dropzone'),
        o = document.querySelector('output'),
        cr = document.querySelector('#crop'),
        j = document.querySelector('#jpeg'),
        c = document.createElement('canvas'),
        cx = c.getContext('2d'),
        thumbwidth = thumbheight = 100,
        crop = false,
        background = 'white',
        jpeg = false,
        quality = 0.8;

    function init() {
        if (typeof FileReader !== 'undefined') {
            document.body.classList.add('dragdrop');
            s.innerHTML = 'Drop images here';
            cr.addEventListener('click', function (evt) {
                document.body.classList.toggle('cropon');
            }, false);
            j.addEventListener('click', function (evt) {
                document.body.classList.toggle('jpegon');
            }, false);
            o.addEventListener('click', function (evt) {
                var t = evt.target;
                if (t.tagName === 'IMG') {
                    t.parentNode.removeChild(t);
                }
            }, false);
            s.addEventListener('dragover', function (evt) {
                evt.preventDefault();
            }, false);
            s.addEventListener('drop', getfiles, false);
        }
    };

    function getfiles(ev) {
        var files = ev.dataTransfer.files,
            url = window.URL || window.webkitURL,
            objURL = url.createObjectURL || false;

        if (files.length > 0) {
            var i = files.length;
            while (i--) {
                var file = files[i];
                if (file.type.indexOf('image') === -1) {
                    continue;
                }
                if (objURL) {
                    loadImage(url.createObjectURL(file));
                } else {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (ev) {
                        loadImage(ev.target.result);
                    };
                }
            }
        }
        ev.preventDefault();
    }

    function loadImage(file) {
        var img = new Image();
        img.src = file;
        img.onload = function () {
            grabformvalues();
            imagetocanvas(this, thumbwidth, thumbheight, crop, background);
        };
    }

    function grabformvalues() {
        thumbwidth = document.querySelector('#width').value;
        thumbheight = document.querySelector('#height').value;
        crop = document.querySelector('#crop').checked;
        background = document.querySelector('#bg').value;
        jpeg = document.querySelector('#jpeg').checked,
        quality = document.querySelector('#quality ').value / 100;
    }

    function imagetocanvas(img, thumbwidth, thumbheight, crop, background) {
        c.width = thumbwidth;
        c.height = thumbheight;
        var dimensions = resize(img.width, img.height, thumbwidth, thumbheight);
        if (crop) {
            c.width = dimensions.w;
            c.height = dimensions.h;
            dimensions.x = 0;
            dimensions.y = 0;
        }
        if (background !== 'transparent') {
            cx.fillStyle = background;
            cx.fillRect(0, 0, thumbwidth, thumbheight);
        }
        cx.drawImage(
        img, dimensions.x, dimensions.y, dimensions.w, dimensions.h);
        addtothumbslist(jpeg, quality);
    };

    function addtothumbslist(jpeg, quality) {
        var thumb = new Image(),
            url = jpeg ? c.toDataURL('image/jpeg', quality) : c.toDataURL();
        thumb.src = url;
        thumb.title = Math.round(url.length / 1000 * 100) / 100 + ' KB';
        o.appendChild(thumb);
    };

    function resize(imagewidth, imageheight, thumbwidth, thumbheight) {
        var w = 0,
            h = 0,
            x = 0,
            y = 0,
            widthratio = imagewidth / thumbwidth,
            heightratio = imageheight / thumbheight,
            maxratio = Math.max(widthratio, heightratio);
        if (maxratio > 1) {
            w = imagewidth / maxratio;
            h = imageheight / maxratio;
        } else {
            w = imagewidth;
            h = imageheight;
        }
        x = (thumbwidth - w) / 2;
        y = (thumbheight - h) / 2;
        return {
            w: w,
            h: h,
            x: x,
            y: y
        };
    };
    init();
})();

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 15px;
    font-family: helvetica, arial, sans-serif;
    padding: 2em;
}
footer, section, output, header, aside, figure {
    display: block;
}
a {
    color: #060;
}
h1 {
    font-size: 24px;
    padding-bottom: 10px;
}
.dragdrop #dropzone {
    width: 250px;
    height: 250px;
    border-radius: 10px;
    border: 2px dotted #393;
    background: #cfc;
    color: #393;
    text-align: center;
    line-height: 200px;
    float: left;
    margin-right: 10px;
}
.dragdrop output {
    width: 520px;
    display: block;
    float: left
}
output img {
    margin: 5px;
    display: block;
    float: left;
}
footer {
    clear:both;
}
section, header, footer {
    width: 800px;
}
input[type=number] {
    width: 3em;
}
input[type=checkbox] {
    margin-right: 10px
}
label {
    padding-right: 10px;
    font-weight: bold;
}
#bg {
    width: 5em;
}
.jpeg {
    opacity: 0.2;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
.crop {
    opacity: 1;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
.cropon .crop {
    opacity: 0.2;
}
.jpegon .jpeg {
    opacity: 1;
}
.options {
    background: #060;
    color: #fff;
    border-radius: 5px;
    margin: 1em 0;
    padding: 5px 10px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
h1 {
    text-transform: uppercase;
    color: #333;
    letter-spacing: -1px;
}
output img {
    display:block;
}
output img:hover {
    box-shadow: 0 0 5px 5px #ccc;
    border: 1px solid #999;
}
h2 {
    font-size: 12px;
}
footer {
    clear: both;
    text-align: right;
    padding: 50px 0 20px 0;
    font-size: 12px;
}
footer a {
    color: #000;
}