码迷,mamicode.com
首页 > Web开发 > 详细

适应各浏览器图片裁剪无刷新上传js插件(转)

时间:2015-11-04 19:11:33      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:

看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒。分享下!~

废话不多说,上效果图。


技术分享

一、首先建立如下的一个page

技术分享
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
    <link href="tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.min.css" rel="stylesheet" />  
    <script src="Scripts/jquery-1.7.1.min.js"></script>  
    <script src="tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.min.js"></script>  
    <script src="imageCropperUpload.js"></script>  
    <script>  
        $(function () {  
  
            var btn = $("#Button1");  
  
            btn.cropperUpload({  
                url: "WebForm1.aspx",  
                fileSuffixs: ["jpg", "png", "bmp"],  
                errorText: "{0}",  
                onComplete: function (msg) {  
                    $("#testimg").attr("src", msg);  
                },  
                cropperParam: {//Jcrop参数设置,除onChange和onSelect不要使用,其他属性都可用  
                    maxSize: [100, 100],//不要小于50,如maxSize:[40,24]  
                    minSize: [70, 70],//不要小于50,如minSize:[40,24]  
                    bgColor: "black",  
                    bgOpacity: .4,  
                    allowResize: false,  
                    allowSelect: false,  
                    animationDelay:50  
                },  
                perviewImageElementId: "fileList", //设置预览图片的元素id    
                perviewImgStyle: { width: 700px, height: 500px, border: 1px solid #ebebeb }//设置预览图片的样式    
            });  
  
            var upload = btn.data("uploadFileData");  
  
            $("#files").click(function () {  
                upload.submitUpload();  
            });  
        });  
    </script>  
</head>  
<body>  
    <div style="width: 400px; height: 300px; float:left">    
            <input id="Button1" type="button" value="选择文件" />    
            <input id="files" type="button" value="上传截图" />    
            <div id="fileList" style="margin-top: 10px; padding-top:10px; border-top:1px solid #C0C0C0;font-size: 13px; width:400px">    
                    
            </div>    
    </div>   
      
    <div id="testdiv" style="padding-top: 580px">  
        <img alt="" src="" id="testimg"/>  
    </div>   
</body>  
</html>  
HTML部分

说明一下以下这几个引用文件的关系

技术分享
<link href="tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.min.css" rel="stylesheet" />  
<script src="Scripts/jquery-1.7.1.min.js"></script>  
<script src="tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.min.js"></script>  
<script src="imageCropperUpload.js"></script>  
引用文件

其中jquery.Jcrop.min.css和jquery.Jcrop.min.js是Jcrop插件必须的一个样式表文件和js文件,当然jquery是一定要引入的,最后面的imageCropperUpload.js文件就是自己写的插件,注意引用顺序不要弄错了,否则不起作用,上面示例中的代码我就不说了,都是很简单的设置。

下面是插件源码(注意:这个是原文博主自己写的插件,使用的时候把它copy下来保存为imageCropperUpload.js,就可以在页面上引用了

技术分享
(function ($) {  
    var defaultSettings = {  
        url: "",                                 //上传地址    
        fileSuffixs: ["jpg", "png"],             //允许上传的文件后缀名列表    
        errorText: "不能上传后缀为 {0} 的文件!", //错误提示文本,其中{0}将会被上传文件的后缀名替换    
        onCheckUpload: function (text) { //上传时检查文件后缀名不包含在fileSuffixs属性中时触发的回调函数,(text为错误提示文本)    
        },  
        onComplete: function (msg) { //上传完成后的回调函数[不管成功或失败,它都将被触发](msg为服务端的返回字符串)   
            alert(msg);  
        },  
  
        onChosen: function (file, obj, fileSize, errorTxt) { /*选择文件后的回调函数,(file为选中文件的本地路径;obj为当前的上传控件实例, 
                                                                    fileSize为上传文件大小,单位KB[只有在isFileSize为true时,此参数才有值], 
                                                                     errorTxt为获取文件大小时的错误文本提示)  */  
            //alert(file);    
        },  
        cropperParam: {}, //图片截取参数设置,此参数即为Jcrop插件参数  
        isFileSize: false,//是否获取文件大小  
        perviewImageElementId: "",//用于预览上传图片的元素id(请传入一个div元素的id)    
  
        perviewImgStyle: null//用于设置图片预览时的样式(可不设置,在不设置的情况下多文件上传时只能显示一张图片),如{ width: ‘100px‘, height: ‘100px‘, border: ‘1px solid #ebebeb‘ }    
    };  
  
  
    $.fn.cropperUpload = function (settings) {  
  
        settings = $.extend({}, defaultSettings, settings || {});  
  
        return this.each(function () {  
            var self = $(this);  
  
            var upload = new UploadAssist(settings);  
  
            upload.createIframe(this);  
  
            //绑定当前按钮点击事件    
            self.bind("click", function (e) {  
                upload.chooseFile();  
            });  
  
            //将上传辅助类的实例,存放到当前对象中,方便外部获取    
            self.data("uploadFileData", upload);  
  
            //创建的iframe中的那个iframe,它的事件需要延迟绑定    
            window.setTimeout(function () {  
                $(upload.getIframeContentDocument().body).find("input[type=‘file‘]").change(function () {  
                    if(!this.value) return;  
                    var fileSuf = this.value.substring(this.value.lastIndexOf(".") + 1);  
  
  
                    //检查是否为允许上传的文件    
                    if (!upload.checkFileIsUpload(fileSuf, upload.settings.fileSuffixs)) {  
                        upload.settings.onCheckUpload(upload.settings.errorText.replace("{0}", fileSuf));  
                        return;  
                    }  
  
                    if (upload.settings.isFileSize) {  
                        var size = perviewImage.getFileSize(this, upload.getIframeContentDocument());  
                        var fileSize, errorTxt;  
                        if (size == "error") {  
                            errorTxt = upload.errorText;  
                        } else {  
                            fileSize = size;  
                        }  
                        //选中后的回调    
                        upload.settings.onChosen(this.value, this, fileSize, errorTxt);  
                    } else {  
                        //选中后的回调    
                        upload.settings.onChosen(this.value, this);  
                    }  
  
  
                    //是否开启了图片预览    
                    if (upload.settings.perviewImageElementId) {  
                        var main = perviewImage.createPreviewElement("closeImg", this.value, upload.settings.perviewImgStyle);  
                        $("#" + upload.settings.perviewImageElementId).append(main);  
                        var div = $(main).children("div").get(0);  
  
                        perviewImage.beginPerview(this, div, upload.getIframeContentDocument(), upload);  
                    }  
                });  
  
                //为创建的iframe内部的iframe绑定load事件    
                $(upload.getIframeContentDocument().body.lastChild).on("load", function () {  
                    var dcmt = upload.getInsideIframeContentDocument();  
                    upload.submitStatus = true;  
                    if (dcmt.body.innerHTML) {  
  
  
                        if (settings.onComplete) {  
                            settings.onComplete(dcmt.body.innerHTML);  
                        }  
  
  
                        dcmt.body.innerHTML = "";  
                    }  
                });  
            }, 100);  
        });  
    };  
})(jQuery);  
  
  
//上传辅助类  
function UploadAssist(settings) {  
    //保存设置  
    this.settings = settings;  
    //创建的iframe唯一名称  
    this.iframeName = "upload" + this.getTimestamp();  
    //提交状态  
    this.submitStatus = true;  
    //针对IE上传获取文件大小时的错误提示文本  
    this.errorText = "请设置浏览器一些参数后再上传文件,方法如下(设置一次即可):\n请依次点击浏览器菜单中的\n‘工具->Internet选项->安全->可信站点->自定义级别‘\n在弹出的自定义级别窗口中找到 ‘ActiveX控件和插件‘ 项,将下面的子项全部选为 ‘启用‘ 后,点击确定。\n此时不要关闭当前窗口,再点击 ‘站点‘ 按钮,在弹出的窗口中将下面复选框的 ‘√‘ 去掉,然后点击 ‘添加‘ 按钮并关闭当前窗口。\n最后一路 ‘确定‘ 完成并刷新当前页面。";  
  
    this.jcropApi;  
    return this;  
}  
UploadAssist.prototype = {  
    //辅助类构造器  
    constructor: UploadAssist,  
  
    //创建iframe  
    createIframe: function (/*插件中指定的dom对象*/elem) {  
  
        var html = "<html>"  
        + "<head>"  
        + "<title>upload</title>"  
        + "<script>"  
        + "function getDCMT(){return window.frames[‘dynamic_creation_upload_iframe‘].document;}"  
        + "</" + "script>"  
        + "</head>"  
        + "<body>"  
        + "<form method=‘post‘ target=‘dynamic_creation_upload_iframe‘ enctype=‘multipart/form-data‘ action=‘" + this.settings.url + "‘>"  
        + "<input type=‘text‘ id=‘x1‘ name=‘x1‘ />"  
        + "<input type=‘text‘ id=‘y1‘ name=‘y1‘ />"  
        + "<input type=‘text‘ id=‘x2‘ name=‘x2‘ />"  
        + "<input type=‘text‘ id=‘y2‘ name=‘y2‘ />"  
        + "<input type=‘text‘ id=‘w‘  name=‘w‘ />"  
        + "<input type=‘text‘ id=‘h‘  name=‘h‘ />"  
        + "<input type=‘text‘ id=‘maxW‘ name=‘maxW‘ />"  
        + "<input type=‘text‘ id=‘maxH‘ name=‘maxH‘ />"  
        + "<input type=‘file‘ name=‘fileUpload‘ />"  
        + "</form>"  
        + "<iframe name=‘dynamic_creation_upload_iframe‘></iframe>"  
        + "</body>"  
        + "</html>";  
  
  
        this.iframe = $("<iframe name=‘" + this.iframeName + "‘></iframe>")[0];  
        this.iframe.style.width = "0px";  
        this.iframe.style.height = "0px";  
        this.iframe.style.border = "0px solid #fff";  
        this.iframe.style.margin = "0px";  
        elem.parentNode.insertBefore(this.iframe, elem);  
        var iframeDocument = this.getIframeContentDocument();  
        iframeDocument.write(html);  
    },  
  
    //获取时间戳  
    getTimestamp: function () {  
        return (new Date()).valueOf();  
    },  
    //设置图片缩放的最大高宽  
    setMaxWidthAndHeight: function (/*最大宽*/maxW,/*最大高*/maxH) {  
        this.getElement("maxW").value = maxW;  
        this.getElement("maxH").value = maxH;  
    },  
    //设置图片截取参数  
    setImageCropperObj: function (/*图片截取对象*/obj) {  
        this.getElement("x1").value = obj.x;  
        this.getElement("y1").value = obj.y;  
        this.getElement("x2").value = obj.x2;  
        this.getElement("y2").value = obj.y2;  
        this.getElement("w").value = obj.w;  
        this.getElement("h").value = obj.h;  
    },  
    //获取创建的iframe中的元素  
    getElement: function (id) {  
        var dcmt = this.getIframeContentDocument();  
        return dcmt.getElementById(id);  
    },  
    //获取创建的iframe中的document对象  
    getIframeContentDocument: function () {  
        return this.iframe.contentDocument || this.iframe.contentWindow.document;  
    },  
  
    //获取创建的iframe所在的window对象  
    getIframeWindow: function () {  
        return this.iframe.contentWindow || this.iframe.contentDocument.parentWindow;  
    },  
  
    //获取创建的iframe内部iframe的document对象  
    getInsideIframeContentDocument: function () {  
        return this.getIframeWindow().getDCMT();  
    },  
  
    //获取上传input控件  
    getUploadInput: function () {  
        var inputs = this.getIframeContentDocument().getElementsByTagName("input");  
        var uploadControl;  
        this.forEach(inputs, function () {  
            if (this.type === "file") {  
                uploadControl = this;  
                return false;  
            }  
        });  
        return uploadControl;  
    },  
  
    //forEach迭代函数  
    forEach: function (/*数组*/arr, /*代理函数*/fn) {  
        var len = arr.length;  
        for (var i = 0; i < len; i++) {  
            var tmp = arr[i];  
            if (fn.call(tmp, i, tmp) == false) {  
                break;  
            }  
        }  
    },  
  
    //提交上传  
    submitUpload: function () {  
        if (!this.submitStatus) return;  
  
        this.submitStatus = false;  
  
        this.getIframeContentDocument().forms[0].submit();  
    },  
  
    //检查文件是否可以上传  
    checkFileIsUpload: function (fileSuf, suffixs) {  
  
        var status = false;  
        this.forEach(suffixs, function (i, n) {  
            if (fileSuf.toLowerCase() === n.toLowerCase()) {  
                status = true;  
                return false;  
            }  
        });  
        return status;  
    },  
  
  
    //选择上传文件  
    chooseFile: function () {  
        if (this.settings.perviewImageElementId) {  
            $("#" + this.settings.perviewImageElementId).empty();  
        }  
  
        var uploadfile = this.getUploadInput();  
        $(uploadfile).val("").click();  
    }  
};  
  
//图片预览操作  
var perviewImage = {  
    timers: [],  
    //获取预览元素  
    getElementObject: function (elem) {  
        if (elem.nodeType && elem.nodeType === 1) {  
            return elem;  
        } else {  
            return document.getElementById(elem);  
        }  
    },  
    //开始图片预览  
    beginPerview: function (/*文件上传控件实例*/file, /*需要显示的元素id或元素实例*/perviewElemId, /*上传页面所在的document对象*/ dcmt, /*上传辅助类实例*/upload) {  
        this.imageOperation(file, perviewElemId, dcmt, upload);  
    },  
    //图片预览操作  
    imageOperation: function (/*文件上传控件实例*/file, /*需要显示的元素id或元素实例*/perviewElemId, /*上传页面所在的document对象*/ dcmt, /*上传辅助类实例*/upload) {  
        for (var t = 0; t < this.timers.length; t++) {  
            window.clearInterval(this.timers[t]);  
        }  
        this.timers.length = 0;  
  
        var tmpParams = {  
            onChange: function (c) {  
                upload.setImageCropperObj(c);  
            },  
            onSelect: function (c) {  
                upload.setImageCropperObj(c);  
            }  
        };  
        var sWidth = 50, sHeight = 50;  
        if (upload.settings.cropperParam.minSize) {  
            var size = upload.settings.cropperParam.minSize;  
            sWidth = size[0] > sWidth ? size[0] : sWidth;  
            sHeight = size[1] > sHeight ? size[1] : sHeight;  
        }  
        var params = $.extend({}, tmpParams, upload.settings.cropperParam || {});  
  
        var preview_div = this.getElementObject(perviewElemId);  
  
        var MAXWIDTH = preview_div.clientWidth;  
        var MAXHEIGHT = preview_div.clientHeight;  
  
        upload.setMaxWidthAndHeight(MAXWIDTH, MAXHEIGHT);  
  
        if (file.files && file.files[0]) { //此处为Firefox,Chrome以及IE10的操作  
            preview_div.innerHTML = "";  
            var img = document.createElement("img");  
            preview_div.appendChild(img);  
            img.style.visibility = "hidden";  
            img.onload = function () {  
                var rect = perviewImage.clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
                img.style.width = rect.width + ‘px‘;  
                img.style.height = rect.height + ‘px‘;  
                img.style.visibility = "visible";  
                var offsetWidth = (rect.width / 2) - (sWidth / 2);  
                var offsetHeight = (rect.height / 2) - (sHeight / 2);  
                var obj = {  
                    x: offsetWidth,  
                    y: offsetHeight,  
                    x2: offsetWidth + sWidth,  
                    y2: offsetHeight + sHeight,  
                    w: sWidth,  
                    h: sHeight  
                };  
  
                $(img).Jcrop(params, function () {  
                    upload.jcropApi = this;  
  
                    this.animateTo([obj.x, obj.y, obj.x2, obj.y2]);  
                    upload.setImageCropperObj(obj);  
                });  
            };  
  
            var reader = new FileReader();  
            reader.onload = function (evt) {  
                img.src = evt.target.result;  
            };  
            reader.readAsDataURL(file.files[0]);  
        } else { //此处为IE6,7,8,9的操作  
            file.select();  
            var src = dcmt.selection.createRange().text;  
  
            var div_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘scale‘,src=‘" + src + "‘)";  
            var img_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘image‘,src=‘" + src + "‘)";  
  
            preview_div.innerHTML = "";  
            var img = document.createElement("div");  
            preview_div.appendChild(img);  
            img.style.filter = img_sFilter;  
            img.style.visibility = "hidden";  
            img.style.width = "100%";  
            img.style.height = "100%";  
  
            function setImageDisplay() {  
                var rect = perviewImage.clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
                preview_div.innerHTML = "";  
                var div = document.createElement("div");  
                div.style.width = rect.width + ‘px‘;  
                div.style.height = rect.height + ‘px‘;  
                div.style.filter = div_sFilter;  
                var offsetWidth = (rect.width / 2) - (sWidth / 2);  
                var offsetHeight = (rect.height / 2) - (sHeight / 2);  
                var obj = {  
                    x: offsetWidth,  
                    y: offsetHeight,  
                    x2: offsetWidth + sWidth,  
                    y2: offsetHeight + sHeight,  
                    w: sWidth,  
                    h: sHeight  
                };  
                preview_div.appendChild(div);  
                $(div).Jcrop(params, function () {  
                    upload.jcropApi = this;  
                    this.animateTo([obj.x, obj.y, obj.x2, obj.y2]);  
                    upload.setImageCropperObj(obj);  
                });  
            }  
  
            //图片加载计数  
            var tally = 0;  
  
            var timer = window.setInterval(function () {  
                if (img.offsetHeight != MAXHEIGHT) {  
                    window.clearInterval(timer);  
                    setImageDisplay();  
                } else {  
                    tally++;  
                }  
                //如果超过两秒钟图片还不能加载,就停止当前的轮询  
                if (tally > 20) {  
                    window.clearInterval(timer);  
                    setImageDisplay();  
                }  
            }, 100);  
  
            this.timers.push(timer);  
        }  
    },  
    //按比例缩放图片  
    clacImgZoomParam: function (maxWidth, maxHeight, width, height) {  
        var param = { width: width, height: height };  
        if (width > maxWidth || height > maxHeight) {  
            var rateWidth = width / maxWidth;  
            var rateHeight = height / maxHeight;  
  
            if (rateWidth > rateHeight) {  
                param.width = maxWidth;  
                param.height = Math.round(height / rateWidth);  
            } else {  
                param.width = Math.round(width / rateHeight);  
                param.height = maxHeight;  
            }  
        }  
  
        param.left = Math.round((maxWidth - param.width) / 2);  
        param.top = Math.round((maxHeight - param.height) / 2);  
        return param;  
    },  
    //创建图片预览元素  
    createPreviewElement: function (/*关闭图片名称*/name, /*上传时的文件名*/file, /*预览时的样式*/style) {  
        var img = document.createElement("div");  
        img.title = file;  
        img.style.overflow = "hidden";  
        for (var s in style) {  
            img.style[s] = style[s];  
        }  
  
        var text = document.createElement("div");  
        text.style.width = style.width;  
        text.style.overflow = "hidden";  
        text.style.textOverflow = "ellipsis";  
        text.style.whiteSpace = "nowrap";  
        text.innerHTML = file;  
  
        var main = document.createElement("div");  
        main.appendChild(img);  
        main.appendChild(text);  
        return main;  
    },  
  
    //获取上传文件大小  
    getFileSize: function (/*上传控件dom对象*/file, /*上传控件所在的document对象*/dcmt) {  
        var fileSize;  
        if (file.files && file.files[0]) {  
            fileSize = file.files[0].size;  
        } else {  
            file.select();  
            var src = dcmt.selection.createRange().text;  
            try {  
                var fso = new ActiveXObject("Scripting.FileSystemObject");  
                var fileObj = fso.getFile(src);  
                fileSize = fileObj.size;  
            } catch (e) {  
                return "error";  
            }  
        }  
        fileSize = ((fileSize / 1024) + "").split(".")[0];  
        return fileSize;  
    }  
};  
JS部分

这里也给出Jcrop插件的下载地址,有需要的可以去下载

二、服务端(这里是asp.net的webform作为示例)
技术分享
public partial class WebForm1 : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        var x = Request.Params["x1"];     //水平偏移量  
        var y = Request.Params["y1"];     //垂直偏移量  
        var x2 = Request.Params["x2"];    //水平偏移量 + 截取宽度  
        var y2 = Request.Params["y2"];    //垂直偏移量 + 截取高度  
        var w = Request.Params["w"];      //截取宽度  
        var h = Request.Params["h"];      //截取高度  
        var maxW = Request.Params["maxW"];//客户端截取时,图片的最大宽度  
        var maxH = Request.Params["maxH"];//客户端截取时,图片的最大高度  
  
        HttpFileCollection files = Request.Files;  
        var fileName = string.Empty;  
        for (var i = 0; i < files.Count; i++)  
        {  
            //首先将图片缩放到与客户端截取时的大小一致  
            using (var bitmap = GenerateThumbnail(int.Parse(maxW), int.Parse(maxH), files[i].InputStream))  
            {  
                fileName = DateTime.Now.Ticks + ".jpg";  
                var newFileName = Server.MapPath("/uploadImg") + "/" + fileName;  
  
                //开始截取  
                ImageCropper(bitmap, int.Parse(w), int.Parse(h), int.Parse(x), int.Parse(y), newFileName,  
                             System.Drawing.Imaging.ImageFormat.Jpeg);  
            }  
        }  
  
        //上传成功,这里只输出文件名,作为示例这样就够了  
        Response.Write("/uploadImg/" + fileName);  
  
        //上传失败  
        // Response.Write("error");  
        Response.Flush();  
        Response.End();  
    }  
    /// <summary>  
    /// 生成指定大小的图片  
    /// </summary>  
    /// <param name="maxWidth">生成图片的最大宽度</param>  
    /// <param name="maxHeight">生成图片的最大高度</param>  
    /// <param name="imgFileStream">图片文件流对象</param>  
    private System.Drawing.Bitmap GenerateThumbnail(int maxWidth, int maxHeight, System.IO.Stream imgFileStream)  
    {  
        using (var img = System.Drawing.Image.FromStream(imgFileStream))  
        {  
            var sourceWidth = img.Width;  
            var sourceHeight = img.Height;  
  
            var thumbWidth = sourceWidth; //要生成的图片的宽度  
            var thumbHeight = sourceHeight; //要生成图片的的高度  
  
            //计算生成图片的高度和宽度  
            if (sourceWidth > maxWidth || sourceHeight > maxHeight)  
            {  
                var rateWidth = (double) sourceWidth/maxWidth;  
                var rateHeight = (double) sourceHeight/maxHeight;  
  
                if (rateWidth > rateHeight)  
                {  
                    thumbWidth = maxWidth;  
                    thumbHeight = (int) Math.Round(sourceHeight/rateWidth);  
                }  
                else  
                {  
                    thumbWidth = (int) Math.Round(sourceWidth/rateHeight);  
                    thumbHeight = maxHeight;  
                }  
            }  
  
            var bmp = new System.Drawing.Bitmap(thumbWidth, thumbHeight);  
            //从Bitmap创建一个System.Drawing.Graphics对象,用来绘制高质量的缩小图。  
            using (var gr = System.Drawing.Graphics.FromImage(bmp))  
            {  
                //设置 System.Drawing.Graphics对象的SmoothingMode属性为HighQuality  
                gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;  
                //下面这个也设成高质量  
                gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;  
                //下面这个设成High  
                gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;  
  
                //把原始图像绘制成上面所设置宽高的缩小图  
                var rectDestination = new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);  
                gr.DrawImage(img, rectDestination, 0, 0, sourceWidth, sourceHeight,  
                             System.Drawing.GraphicsUnit.Pixel);  
                return bmp;  
            }  
        }  
    }  
    /// <summary>  
    /// 截取图片中的一部分  
    /// </summary>  
    /// <param name="img">待截取的图片</param>  
    /// <param name="cropperWidth">截取图片的宽</param>  
    /// <param name="cropperHeight">截取图片的高</param>  
    /// <param name="offsetX">水平偏移量</param>  
    /// <param name="offsetY">垂直偏移量</param>  
    /// <param name="savePath">截取后的图片保存位置</param>  
    /// <param name="imgFormat">截取后的图片保存格式</param>  
    private void ImageCropper(System.Drawing.Image img, int cropperWidth, int cropperHeight, int offsetX,  
                              int offsetY, string savePath,  
                             System.Drawing.Imaging.ImageFormat imgFormat)  
    {  
        using (var bmp = new System.Drawing.Bitmap(cropperWidth, cropperHeight))  
        {  
            //从Bitmap创建一个System.Drawing.Graphics对象,用来绘制高质量的缩小图。  
            using (var gr = System.Drawing.Graphics.FromImage(bmp))  
            {  
                //设置 System.Drawing.Graphics对象的SmoothingMode属性为HighQuality  
                gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;  
                //下面这个也设成高质量  
                gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;  
                //下面这个设成High  
                gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;  
  
                //把原始图像绘制成上面所设置宽高的截取图  
                var rectDestination = new System.Drawing.Rectangle(offsetX, offsetY, cropperWidth, cropperHeight);  
                gr.DrawImage(img, 0, 0, rectDestination,  
                             System.Drawing.GraphicsUnit.Pixel);  
  
                //保存截取的图片  
                bmp.Save(savePath, imgFormat);  
            }  
        }  
    }  
}  
服务器端

服务端其实也很简单,我想应该都看得明白吧!关键是思路,我们首先将图片缩放到和客户端截取时相同的大小,然后再在这个缩放的图上进行截取 就这么简单,这样就能保证截取到相同位置的图片,好了 最后感谢原文博主。

原文地址:http://blog.csdn.net/sq111433/article/details/17562703

适应各浏览器图片裁剪无刷新上传js插件(转)

标签:

原文地址:http://www.cnblogs.com/MirageFox/p/4936797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!