图片上传和裁剪，bitmapcutter组件的使用

Posted 2020-10-13 tooy

图片上传在上篇博文中讲过。

这里主要是裁剪的实现，需要用到bitmapcutter组件。

jquery.bitmapcutter该插件由Jericho开发,它的主要作用是客户端裁图。

引入jquery库

<script language="javascript" type="text/javascript" src="/js/jquery1.4.2.min.js"></script>

引入jquery.bitmapcutter库及其相关样式

<script type="text/javascript" src="/javascript/jquery.bitmapcutter.js"></script>
<link rel="Stylesheet" type="text/css" href="/css/jquery.bitmapcutter.css" /> 

直接上代码：

js

    uploadOkHeadPhoto: function (file, response) {
        response = $.parseJSON(response);
        if (!response.IsSuccess) return;

        if (typeof (response.Data) == "string") {
            $("#target").attr("src", response.Data + "?_t=" + Math.random());
        }
        else if (response.Data.length == 1) {
            $("#target").attr("src", response.Data[0] + "?_t=" + Math.random());
        } else {
            var urlimg;
            var filename;
            if (response.Data.length > 1) {
                urlimg = response.Data[0].replace("\\"", "").replace("\\"", "");
                filename = urlimg.substring(urlimg.lastIndexOf("/") + 1);
                jcropimg.open(urlimg + "?_t=" + Math.random(), urlimg, response.Data[1]);
            }
        }
    },

上传完成后的回调用函数，open裁剪功能：

//剪裁图片
var jcropimg = {
    fileurl: "",
    fileposition: "",
    isCut: false,
    open: function (imgurl, fileurl, fileposition) {
        jcropimg.fileurl = fileurl;
        jcropimg.fileposition = fileposition;
        jcropimg.isCut = false;


        var dialog; dialogid = \'dlgw_dialog_jcropimg\';
        var buttons = beehunt.getDefaultButtons();
        buttons[0].text = \'确定\';
        buttons[0].handler = function () {
            $("#uploadPicture").attr("src", fileurl + "?t=" + Math.random());
            $("#hidPicturePath").val(jcropimg.fileposition);
            $("#hidPictureUrl").val(jcropimg.fileurl);
            this.close();
        };
        dialog = beehunt.dialog({ id: dialogid, url: \'/dialog/jcropimg?islogo=1&dialogid=\' + dialogid + \'&imgurl=\' + imgurl + \'&fileurl=\' + fileurl, title: \'裁剪\', width: \'600\', height: \'600\', buttons: buttons, grid: \'\' });
    }
};

弹出裁剪dialog，如下图：

html代码：

 <!---裁剪图片 弹框-->
<form id="FrmJcropimg_Dialog" method="post">
    <table style="width:100%;">
        <tr>
            <td>
                <div class="img-container" style="text-align:center;min-width:300px;">
                    <img id="jcropimg" style="display:none;" />
                </div>
                <div id="container"></div>

                <div id="div_preview" style="display:none;text-align:center;vertical-align:middle;">
                    <br />
                    <p style="margin:0px;">裁剪后效果图如下</p>
                    <br />
                    <img id="preview" />
                    <br /><br />
                </div>
            </td>
        </tr>
    </table>
</form>

确保你的网页中有一个装下该插件的容器

<div id="container"></div>

html加载完成的js代码：

@*定义选中按钮OnPageLoad执行脚本*@
//照片裁剪代码
//src:原始大图的路径
//width:目标宽
//height:目标高
//newSrc:裁完以后,用于显示小图片的元素ID 

@section OnPageLoad{
    <script type="text/javascript">
    $(function () {
        $("#jcropimg").attr("src", \'@req_imgUrl\');

        $("#container").html(\'\');
        $("#jcropimg").attr("src", "").hide();

        var w = 150, h = 150;//  剪切
        var pw = \'200px\', ph = \'270px\', phh = \'235px\';//窗口

        $.fn.bitmapCutter({
            src: \'@req_fileUrl\',
            requesturl: \'/api/scissors.axd\',

            renderTo: $("#container"),
            cutterSize: { width: w, height: h },
            onGenerated: function (newSrc) { //裁完并保存后返回保存后图片地址
                $("#preview").attr("src", newSrc + "?t=" + Math.random()).show();
                $("#div_preview").show();
                $("#container").hide();
                $(".jquery-bitmapcutter-newimg").hide();

                var dialog = $(top.window.document).find("#@req_dialogId").eq(0);
                dialog.css({ "width": "", "height": ph });
                dialog.find(".dialog-content").css({ "width": "", "height": phh });
                dialog.parent().next().css({ "width": pw, "height": ph });

                //dialog.parent().next().next().remove();
                //dialog.parent().next().remove();
                //dialog.parent().remove();
            },
            rotateAngle: 90
        });
    });
    </script>
}

　注意,在这个插件中点击"开始裁切"后,它会裁切前上传,再返回小图的SRC,这里就涉及了上传插件的对接,这个插件名叫 BitmapCutter.Core,这是由国内一位工程师写的,当然如果你觉得不爽,你也可以定义自己的上传插件,不过我要提醒大家的是重写这些代码的代价是否划算。

请注意在jquery.bitmapcutter.js第423行

$.get(\'scissors.axd\',{.....

 这里给出了上传的路径，需要到web.config中做映射处理：

映射处理在Web.config中System.Web节：

<system.web>
   <httpHandlers>
   <add path="scissors.axd" verb="*" type="BitmapCutter.Core.HttpHandler.BitmapScissors,BitmapCutter.Core" validate="false"/>
  </httpHandlers> 

httpHandlers元素说明

要做到这些，我们需要做以下工作：

1.在你的项目中引用BitmapCutter.Core.dll

2.修改Web.config中的System.Web节

好了,所有的工作差不多完成。

 

参考博文：

很棒的在线裁图工具jQuery1.4.2 + jquery.bitmapcutter.js + BitmapCutter.Core+的完美配合

jquery.bitmapcutter(图片裁剪插件) 与 jquery1.4.2 配合