Question

我有一个MVC应用程序，我需要在其中预览，裁剪图像并将其保存在服务器中。我使用如此多的裁剪技术来执行此操作Jcrop不受我的Jquery版本支持。所以，我使用<强大的>令人敬畏的Cropper 技术。现在我的问题是通过使用这个我可以预览图像但不能裁剪它。任何人都可以帮我做到这一点。

我的index.cshtml如下所示。

 <h2>ImageUpload</h2>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/imgareaselect-default.css" rel="stylesheet" />
<link href="~/Content/jquery.awesome-cropper.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.imgareaselect.js"></script>
<script src="~/Scripts/jquery.awesome-cropper.js"></script>


<img class="col-lg-9" id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="demo" type="hidden" name="test[image]" onchange="PreviewImage();">
<script type="text/javascript">
    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("demo").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };
</script>
<script>
    $(document).ready(function () {
        $('#demo').awesomeCropper({
            width: 200,
            height: 200,

            debug: true
        });
    });
</script>
<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36251023-1']);
    _gaq.push(['_setDomainName', 'jqueryscript.net']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>

Answer 1

我使用Cropbox.js和mousewheel.js

得到了这个

<link href="~/Content/jquery.cropbox.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.mousewheel.js"></script>
<script src="~/Scripts/jquery.mousewheel.min.js"></script>
<script src="~/Scripts/jquery.cropbox.js"></script>

<div id="demo" class="cropbox">


    <!-- Crop buttons -->
    <div class="btn-group">

            <i class="glyphicon glyphicon-folder-open"></i>
            Browse <input type="file" accept="image/*">

        <button type="button" class="btn btn-success btn-crop">
            <i class="glyphicon glyphicon-scissors"></i> Crop
        </button>

    </div>
    <!-- Crop area -->
    <div class="workarea-cropbox">

        <img class="image-cropbox">

        <br /><br /><br />
        <div class="frame-cropbox">
            <div class="resize-cropbox"></div>
        </div>

    </div>

    <!-- Cropped image -->
    <div class="cropped panel panel-default">

        <div class="panel-body">...</div>
    </div>

    <!-- Info of cropping -->
    <div class="form-group">

        <textarea class="data form-control" name="hide" style="display:none;"></textarea>

    </div>
</div>
<script>
   $(document).ready(function () {
    $('#demo').cropbox({
        selectors: {
            inputInfo: '#demo textarea.data',
            inputFile: '#demo input[type="file"]',
            btnCrop: '#demo .btn-crop',

            resultContainer: '#demo .cropped .panel-body',
            messageBlock: '#message'
        },

        imageOptions: {
            class: 'img-thumbnail',
            style: 'margin-right: 5px; margin-bottom: 5px'
        },

        variants: [{
            width: 200,
            height: 200,
            minWidth: 180,
            minHeight: 200,
            maxWidth: 800,
            maxHeight: 800
        }, {
            width: 150,
            height: 200
        }],

        messages: [
        'Crop a middle image.'

        ]

    });
});

   </script>

图像裁剪使用Jquery令人敬畏的裁剪器，不工作

1 个答案: