上传图片，然后检查最大标准，然后创建缩略图

upload image then check the max criteria then create thumbnail

本文关键字：然后 标准 创建 略图 检查      更新时间：2023-09-26

当天的问候语

我的任务是：

步骤1：上传图片。

步骤2：检查上传图像的标准与我们的最大尺寸（xyx或例如：500X500）

步骤3：如果条件匹配，则创建145X190维度的缩略图

由我完成：我能够上传一张图片，还做了标准验证。

现在我想创建用户上传的那个图像的缩略图。（145X190尺寸)

我的围板是：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(function () { 
function readImage(file) {
    var reader = new FileReader();
    var image = new Image();
    var maxh = 600;
    var maxw = 600;
    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (w > maxw && h > maxh) {
                alert("Height and width is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(width);
                alert(height);
            } else {

                $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }
        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };
}
$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
});
</script>

<style>

</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple"  onchange="readImage(this);" />
<br>
<div id="uploadPreview" ></div>
</body>
</html>

问题：上传图像后创建缩略图。

我还创建了缩略图编码，但无法将两个代码组合在一起。

我的代码是：

<html>
<head>
      <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
      <script type="text/javascript" src="scripts/jquery.min.js"></script>
      <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
      <script type="text/javascript">
            var thumbWidth = 145, thumbHeight = 190;
            function preview(img, selection) {
            var scaleX = thumbWidth / (selection.width || 1);
            var scaleY = thumbHeight / (selection.height || 1);
            $('#ferret + div > img').css({
                width: Math.round(scaleX * $("#ferret").width()) + 'px',
                height: Math.round(scaleY * $("#ferret").height()) + 'px',
                marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
            });
        }
        $(document).ready(function () {
            $('<div><img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" style="position: relative;" /><div>')
                .css({
                    float: 'right',
                    position: 'relative',
                    overflow: 'hidden',
                    width: thumbWidth + 'px',
                    height: thumbHeight + 'px'
                })
                .insertAfter($('#ferret'));
            $('#ferret').imgAreaSelect({aspectRatio: thumbWidth+':'+thumbHeight, onSelectChange: preview ,minWidth: 100,minHeight: 100,maxWidth: 180,maxHeight: 180});
        });
</script>
</head>
<body>
   <img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ferret" ><br>
</body>
</html>

希望你能理解我的问题。。。

对于缩略图，我建议您创建一个div并设置其背景图像，而不是使用<img>标记，因为这会导致缩放和纵横比问题。

您可以使用以下代码来实现

 $('<div> <div>')
               .css({
                   'width': thumbWidth + 'px',
                   'height': thumbHeight + 'px',
                   'background': "url('http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg')",
                   'background-size': '100% 100%',
                   'background-repeat': 'no-repeat',
                   'float': 'right',
                   'background-origin': 'content-box'
           })
               .insertAfter($('#ferret'));

为了支持旧浏览器，您可能需要将供应商前缀（如-moz-、-webkit-）添加到上面的css属性中。

您可以访问该文件，然后将其传递给readImage()函数，如果它返回false（您可以修改函数以执行此操作），则不要继续。否则处理图像并使用上面的代码为其生成缩略图

jsfiddle：http://jsfiddle.net/xKTU2/1/

相关文章：