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

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

这里主要是裁剪的实现,需要用到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 配合

时间: 2024-10-09 23:48:18

图片上传和裁剪,bitmapcutter组件的使用的相关文章

VUE2.0+VUE-Router做一个图片上传预览的组件

之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的这个是项目中用户反馈功能而来的,收获还是挺多的. 收获:dom操作=>数据操作       router的使用       组件的使用,具体总结放在尾部. 功能:1.上传图片 2.显示缩略图 3.可以删除 4.可以重新选择文件 先上成品图(主要抽取图片这块),自己在家主要做的功能,样式就不计较了.

Jquery插件-Html5图片上传并裁剪

/** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:function(elementHeader,element){elementHeader.onmousedown=Drag.start;elementHeader.obj=element;if(isNaN(parseInt(element.style.left))){element.style.le

jsp图片上传

1.要实现图片上传,首先需要一个组件,这里我用的是smartupload.jar可以到这里下载http://download.csdn.net/detail/mengdecike/8279247 2.下载之后把这个文件直接复制到WebContent/WEB-INF/lib下面 3.jsp页面 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding=&quo

[xPlugin] smartupload jsp图片上传

URL:http://www.cnblogs.com/ISeeYouBlogs/p/jsp.html 1.要实现图片上传,首先需要一个组件,这里我用的是smartupload.jar可以到这里下载http://download.csdn.net/detail/mengdecike/8279247 2.下载之后把这个文件直接复制到WebContent/WEB-INF/lib下面 3.jsp页面 1 <%@ page language="java" contentType="

MVC使用JCrop上传、裁剪图片

JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际项目中最有可能的做法是:在本页上传.裁剪并保存. □ 思路 →在上传图片视图页,把图片上传保存到一个临时文件夹Upload→在编辑裁剪视图页,点击"裁剪"按钮,把JCrop能提供的参数,比如宽度.高度.离顶部距离,离底部距离,离左右端距离等封装成类,传递给控制器方法→控制器方法根据接收到的

在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文件上传,在chrome, firefox下运行良好,但在某些版本的IE浏览器(比如IE8,IE9)下却无法正常运行,这可能是因为JSAjaxFileUploader插件在编写时没有考虑到某些低版本IE浏览器导致的.本篇,就在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

图片上传组件开发

我就要自行车 - 需求整理 放眼WWW,一般的图片上传模块,主要就是实现了三个功能,图片的预览,图片的剪裁及预览,图片的上传,那我也就整这么一个吧,再细化一下需求. 图片的预览 用户使用:用户点击“选择图片”,弹出文件浏览器,可以选择本地的图片,点击确认后,所选图片会按照原始比例出现在页面的浏览区域中. 组件调用:开发者可以自己定义图片预览区域的大小,并限定所传图片的文件大小和尺寸大小. 图片的剪裁 用户使用:用户根据提示,在预览区域的图片上拖动鼠标框出想要上传的图片区域,并且能在结果预览区域看

H5拍照、选择图片上传组件核心

背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决定自己写一个h5移动端图片上传组件.图片上传是一个比较普遍的需求,PC端还好,移动端就不是特别好做了.下面将过程中一些重点的问题进行简单的记录. 重点 1.关于input 选择功能使用<input>标签实现.属性accept='image/*',:capture表示,可以捕获到系统默认的设备,比如