Question

我是关于推出我最大的梦想网站（我的第一个），但有一些未解决的问题。我是一个完整的编码新手，并高度依赖插件和教程来完成工作。现在，我在处理图像方面遇到了问题，我已经尝试了很多选项来解决这些问题，但没有找到任何完美的解决方案。我有一个功能，用户可以创建自己的个人资料，上传个人资料图片和封面图片，重新定位并保存（有点像Facebook）。并且他们还可以更新他们可以发布多个图像（最多5个）的状态。

我的要求是：

在重新定位并保存封面照片的同时，我保存新位置的“x”和“y”位置并裁剪图像以单独保存。这里的问题是，裁剪是为了适应图像的容器div的高度和宽度。（例如，容器的高度为250px，宽度为325px，图像被裁剪以适合该div）。由于我的容器具有响应性，因此不同屏幕尺寸的高度和宽度会有所不同，我的裁剪图像也是如此。在小屏幕上，图像被裁剪为100px * 180px，这是一场灾难。我想知道解决这个问题的有效方法，以便图像在任何地方都是一致的。
在多次上传中，在我的Chrome开发者工具中打开网络标签之前，所有内容似乎都运行正常。一页有26张图片，页面大小为11.8mb。我使用GD库来缩小我的图像，但现在如果我尝试进一步调整它们以减小文件大小，则质量会丢失并且图像会变得模糊。我打算使用ImageMagick，但不知道它是否符合我的目的。我不希望我的任何图像超过50kb - 60kb，但仍然保持相当大的质量。我可以做到这一点！

以下是我用于封面照片的代码

HTML

<div class="drag-banner">
        <!--Container div for Cropped and repositioned image-->
    <div class="banner-wrapper"> 
        <!--Dropdown menu for Options-->
        <div class="dropdown upload-banner">
            <div class="dropdown-toggle cam-wrap" type="button" data-toggle="dropdown" >
                <i class="fa fa-camera"></i>
            </div>
            <ul class="dropdown-menu" role="menu">

                <li role="presentation" id="" class="uplbBtn">
                    <a role="menuitem" tabindex="-1" class="type-file">
                        <form class="banrPosition-form" method="post" enctype="multipart/form-data">
                            <label class="label-file" for="uploadImage">
                                <i class="fa fa-upload"></i>Upload Cover
                                <input type="file" class="btn-file" name="uploadImg" id="uploadImage">
                            </label>
                            <input type="hidden" class="banrPosition" name="pos" id="pos" value="0">
                        </form>
                    </a>
                </li>
                <li role="presentation"><a role="menuitem" tabindex="-1" id="repstnBnr"><i class="fa fa-arrows"></i>Reposition Cover</a></li>
            </ul>
        </div>
        <!--Cropped Image-->
        <img class="img-responsive bannr-img" id="cropped" src="<?php echo $croppedUrl; ?>">
    </div>
<!--Container div for Original uncropped image-->
    <div class="banner-resize-wrapper">
        <img class="img-responsive banner-img" id="uncropped" src="">
    </div>
<!--Drag and reposition instruction text-->
    <div class="drag">
        <div class="txt"><i class="fa fa-arrows"></i> Drag to reposition banner</div>
    </div>
<!--Div shown during ajax submit-->
    <div class="ajxFrmDiv"><div class="txt"></div></div>
 </div>

    <button id="savRpstn" class="btn btn-primary btn-xs savRpstn marg-all-sm">Save Position</button>  
    <button id="cnclRpstn" class="btn btn-default btn-xs cnclRpstn marg-all-sm">Cancel</button>

CSS

.drag-banner {margin: 0 auto;padding: 0;position: relative;height:275px;} /*Main Container*/

.banner-wrapper {display: block;} /*Original Image Wrapper*/
.banner-resize-wrapper {display: none;} /*Original Image Wrapper*/

.banner-wrapper,.banner-resize-wrapper{width: 100%;position:relative;overflow:hidden;height:100%;}

.banner-wrapper img.banner-img{width: 100%;max-height: 100%;}
.banner-resize-wrapper img.banner-img {position: absolute;width: 100%;min-height:100%;cursor:s-resize;}

.cam-wrap{border-radius:50%;background: transparent;padding: 8px;border:2px solid transparent;}

.banner-wrapper:hover > .upload-banner > .cam-wrap, .upload-banner.open .cam-wrap
{border-radius:50%;background: rgba(0,0,0,0.5);padding: 8px;border:3px solid #ccc;}
.banner-wrapper:hover > .upload-banner > .cam-wrap > .fa-camera, .upload-banner.open .cam-wrap .fa-camera{
    font-size: 120%; 
    -o-transition: all 0.085s;
    -moz-transition: all 0.085s;
    -webkit-transition: all 0.085s;
    transition: all 0.085s;
}

.upload-banner{
    cursor: pointer;
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 10px;
}

.btn-file{padding:0;}
.dropdown-menu .label-file{width:100%;height:100%;padding:5px 15px;} /*Padding to match with dropdown-menu>li>a padding*/
.label-file{cursor: pointer;} 
.label-file .btn-file {
    position: fixed;
    top: -1000px;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: pointer !important;
}

.drag-banner .black-strip{padding: 0 10px;}

.drag{
    line-height: 26px;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
    display: none;
}
.drag .txt{
    background-color: rgba(84, 97, 133, 0.5);
    -webkit-border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .12);
    color: #fff;
    display: inline;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 10px;
}

.ajxFrmDiv{
    top: 0;
    left: 0;
    width: 100%;
    color: #000; 
    height: 100%;
    display: none;
    margin: 0 auto;
    font-size: 150%;
    font-weight: 700;
    position: absolute;
    z-index: 11000;
    background: rgba(255,255,255,0.75);
}
.ajxFrmDiv .txt{
    position: absolute;
    top: 40%;
    left: 35%; 
    align-items: center;
    display: -webkit-flex;  
    display: flex;
    -webkit-justify-content: center;   
    justify-content: center;
}

JS

$('body').on('click', '#savRpstn', function() {
    saveReposition();
});

function saveReposition() {

        x1 = $('.drag-banner').width(); //Container Width
        y1 = $('.drag-banner').height(); //Container Height
        y2 = $('.banner-resize-wrapper').find('img').height(); //Image Height

//The form is submitted here with the above values
}

PHP

//The width, height and position from top are sent like this
$from_top = abs($_POST['x1']);
$default_cover_width = $_POST['y1'];
$default_cover_height = $_POST['y2'];

$tb->cropThumb($default_cover_width, $default_cover_height, 0, $from_top);

//New Image is formed 
public function cropThumb($width, $height, $x, $y)
    {
        $oldw = $this->getWidth();
        $oldh = $this->getHeight();

        $this->handlethumb = imagecreatetruecolor($width, $height);

        return imagecopy($this->handlethumb, $this->handleimg, 0, 0, $x, $y, $width, $height);
    }

对不起，我无法在任何地方重新创建此问题，我不知道JSFiddle是如何运作的。

我在Imagur上传了.gif图片，显示了该问题。我已经说明了如何以2种不同的屏幕尺寸裁剪图像。请仔细看看并帮助我有效地裁剪和调整这些图像的大小

在不损失纵横比或质量的情况下有效缩小图像

0 个答案: