步步為營-87-imageAreaSelect插件使用(圖片剪切) -开发者知识库

步步為營-87-imageAreaSelect插件使用(圖片剪切) -开发者知识库,第1张

1 引用文件

jquery.imgareaselect.min.cs

imgareaselect-default.js

2 代碼

步步為營-87-imageAreaSelect插件使用(圖片剪切) -开发者知识库,第2张
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SWFUpload_Demo.aspx.cs" Inherits="BookShop.Web.Test.SWFUpload_Demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../../js/jquery-1.7.1.js"></script>
    <script src="../handlers.js"></script>
    <script src="../swfupload.js"></script>
    <script src="../../js/jquery.imgareaselect.min.js"></script>
    <link href="../../Css/imgareaselect-default.css" rel="stylesheet" />
    <script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                //指定要上傳的路徑
                upload_url: "/ashx/FileUpload.ashx?action=upload",
                async: true,
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },

                // File Upload Settings
                file_size_limit: "2 MB",
                file_types: "*.jpg;*.gif",
                file_types_description: "JPG Images",
                file_upload_limit: 0,    // Zero means unlimited

                // 事件處理了的三個主要方法定義在 Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                swfupload_preload_handler: preLoad,
                swfupload_load_failed_handler: loadFailed,
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                upload_success_handler: showImage,
                upload_complete_handler: uploadComplete,

                // 按鈕設置
                button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span class="button">請選擇上傳圖片<span class="buttonSmall">(2 MB Max)</span></span>',
                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 1,
                button_text_left_padding: 5,

                // Flash Settings
                flash_url: "/SWFUpload/swfupload.swf",    // Relative to this file
                flash9_url: "/SWFUpload/swfupload_FP9.swf",    // Relative to this file

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },

                // Debug Settings
                debug: false
            });
        }
        //上傳成功以后調用該方法
        function showImage(file, serverData) {
            var data = serverData.split(':');
            //將上傳成功的圖片作為div的背景
            console.log(data[0]);
            $("#selectbanner").attr("src", data[0]);
            $('#selectbanner').imgAreaSelect({
                selectionColor: 'blue', x1: 0, y1: 0, x2: 100,
                y2: 100, selectionOpacity: 0.2, onSelectEnd: preview
            });
        };
        //選擇結束以后調用該方法
        function preview(img, selection) {
            $('#selectbanner').data('x', selection.x1);
            $('#selectbanner').data('y', selection.y1);
            $('#selectbanner').data('w', selection.width);
            $('#selectbanner').data('h', selection.height);
        };
        //裁剪確認操作

        $(function () {
            $("#btnCut").click(function () {

                var pic = $('#selectbanner').attr('src');
                var x, y, w, h;
                $.post(
                 "/ashx/FileUpload.ashx",
                 {
                     "x": $('#selectbanner').data('x'),
                     "y": $('#selectbanner').data('y'),
                     "w": $('#selectbanner').data('w'),
                     "h": $('#selectbanner').data('h'),
                     "pic": pic,
                     "action": "cut",
                 },
                function (data) {
                    //把裁剪后圖片加載到原處
                    $('#selectbanner').attr("src", data);
                }
                )

                //var pars = {
                //    "x": $('#selectbanner').data('x'),

                //    "y": $('#selectbanner').data('y'),

                //    "w": $('#selectbanner').data('w'),

                //    "h": $('#selectbanner').data('h'),
                //    "action": "cut",
                //    "pic": $("#selectbanner").attr("src")

                //};

                //$.post("/ashx/FileUpload.ashx", pars, function (data) {
                //    $("#showPhoto").attr("src",data);
                //});

            });
        })

    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div id="content">
            <div id="swfu_container" style="margin: 0px 10px;">
                <div>
                    <span id="spanButtonPlaceholder"></span>
                </div>

                <div id="divFileProgressContainer" style="height: 75px;"></div>
                <div id="thumbnails"></div>
                <input type="button" value="截取圖片" id="btnCut" />
                <img id="selectbanner" />
                <img id="showPhoto" />

            </div>
        </div>
    </form>
</body>
</html>

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复