Question

我正在尝试使用Jcrop插件裁剪图像。上传的图像大于我想要的尺寸（600X600）。

我正在做的是最初将图像尺寸设置为600X600以将其显示给用户，然后将其尺寸设置为原始高度和宽度。然后将原始高度和宽度设置为＆＃34; trueSize＆＃34;选择Jcrop来获得正确的裁剪。

问题是我第一次没有获得正确的原始高度和上传图像的宽度。但是当我再次上传它而不清除缓存时，它工作正常。我希望第一次获得图像的原始大小。这是我的代码：

HTML：

<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
    <tr>
        <td>
            <img id="Image1" src="" alt="" style="display: none;" />
        </td>
        <td>
            <canvas id="canvas" height="5" width="5"></canvas>
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />

Jquery的：

$(document).delegate('#cover-image','change', function(e){
        $('.update-img').hide();
        $('#Image1').hide();
        $('#loader1').show();
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#Image1').attr("src", e.target.result);
            var $img = $("#Image1");
            $img.hide().removeClass("image12");
            var width = $img.width();
            var height = $img.height();
            $img.addClass("image12").show();

            $('#Image1').Jcrop({
                setSelect: [ 0,0,600,180 ],
                aspectRatio: 10/3,
                trueSize: [width, height],
                onChange: SetCoordinates,
                onSelect: SetCoordinates
            });
        }

        reader.readAsDataURL($(this)[0].files[0]);      
    });

    $('#btnCrop').click(function () {
        var x1 = $('#imgX1').val();
        var y1 = $('#imgY1').val();
        var width = $('#imgWidth').val();
        var height = $('#imgHeight').val();
        var canvas = $("#canvas")[0];
        var context = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            canvas.height = 180;
            canvas.width = 600;
            context.drawImage(img, x1, y1, width, height, 0, 0, canvas.width, canvas.height);
            $('#imgCropped').val(canvas.toDataURL());
            $('#btnCrop').hide();
            $('#save-cropped-image, #delete-image, .preview').show();
        };
        img.src = $('#Image1').attr("src");
    });

function SetCoordinates(c) {
    $('#imgX1').val(c.x);
    $('#imgY1').val(c.y);
    $('#imgWidth').val(c.w);
    $('#imgHeight').val(c.h);
    $('#btnCrop').show();
    $('#save-cropped-image, #delete-image').hide();
};

CSS：

.image12{
   height:600px; 
   width:600px;
}

如果有人知道答案，请快速回复。谢谢！

Answer 1

在jquery.js文件中使用此代码

let str = "<strong>Nice</strong> try, Phil".style(tags:
    Style("strong").font(.boldSystemFont(ofSize: 15))).attributedString

label.attributedText = str

如何在Jcrop中设置自定义高度和宽度后获取图像的原始高度和宽度

1 个答案: