Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 如何在ASP.net Mvc中将裁剪后的图像保存在项目文件夹中_Jquery_Html_Asp.net Mvc_Crop - Fatal编程技术网

Jquery 如何在ASP.net Mvc中将裁剪后的图像保存在项目文件夹中

Jquery 如何在ASP.net Mvc中将裁剪后的图像保存在项目文件夹中,jquery,html,asp.net-mvc,crop,Jquery,Html,Asp.net Mvc,Crop,在我的Asp.net MVC项目中,我需要上传一个图像并对其进行裁剪,需要将裁剪后的图像显示为配置文件图片,并将其保存在项目的文件夹中。 我已经编写了以下代码来裁剪图像。现在我想将裁剪后的图像保存在我项目的文件夹中,但我不知道如何操作。有人能帮我吗?我是编程新手,即使我有这样做的想法,请有人帮我 我的.cshtml文件是 <link href="~/Content/jquery.cropbox.css" rel="stylesheet" /> <script src="~/Sc

在我的Asp.net MVC项目中,我需要上传一个图像并对其进行裁剪,需要将裁剪后的图像显示为配置文件图片,并将其保存在项目的文件夹中。 我已经编写了以下代码来裁剪图像。现在我想将裁剪后的图像保存在我项目的文件夹中,但我不知道如何操作。有人能帮我吗?我是编程新手,即使我有这样做的想法,请有人帮我

我的.cshtml文件是

<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" name="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" name="File">...</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: 100,
            minHeight: 100,
            maxWidth: 800,
            maxHeight: 800
        }, {
            width: 150,
            height: 200
        }],

        messages: [
        'Crop a middle image.'

        ]

    });
});

   </script>

浏览
收成



... $(文档).ready(函数(){ $('#demo').cropbox({ 选择器:{ inputInfo:“#demo textarea.data”, inputFile:'#演示输入[type=“file”], btnCrop:“#demo.btn crop”, 结果容器:“#演示.裁剪.面板主体”, messageBlock:“#消息” }, 图像选项:{ 类:“img缩略图”, 样式:“右侧边距:5px;底部边距:5px” }, 变体:[{ 宽度:200, 身高:200, 最小宽度:100, 身高:100, 最大宽度:800, 最大高度:800 }, { 宽度:150, 身高:200 }], 信息:[ “裁剪中间图像。” ] }); });
如果你仔细看

对cropbox对象的引用可以这样访问:

var crop = $('yourimage').data('cropbox');
console.log(crop.result);
如果你仔细看

对cropbox对象的引用可以这样访问:

var crop = $('yourimage').data('cropbox');
console.log(crop.result);

还有你应该看的关于裁剪的活动。还有你应该看的关于裁剪的活动。嗨,suresh,谢谢你的帮助。但是请不要介意详细解释。裁剪的图像将显示在以下标签中。。。。现在我需要保存在项目的文件夹中。嗨,suresh,谢谢你的帮助。但请不要介意详细解释。裁剪后的图像将显示在以下标签中。。。。现在我需要保存在项目的文件夹中。