图片切割，图片裁切

我是要设计这样的一个功能，首先当浏览图片时能预览本地图片，然后对预览的图片进行裁切，最后点击保存在本地磁盘中。
但是现在出现了问题，由于在预览本地图片时浏览的安全机制导致我使用了滤镜来完成了本地图片预览
但是在图片裁切时发现我用的几个jq插件的裁切功能无法正确使用。
在此想问大家应如何来做？
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Default</title>
<style type="text/css">
#imgPreview
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
    width:220px;
    height:220px;
    overflow:hidden;
}
</style>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.imgareaselect.min.js" type="text/javascript"></script>
<link href="Styles/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" name="form1" method="post" runat="server">
    <div id="divContainer">
        <input class="input_file" type="file" id="file1" onchange="fnPreview();" />
        <br /><br />
        <img id="imgPreview" border="0" src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==" />
    </div>
    </form>
    <script type="text/javascript">
        var ipv = document.getElementById("imgPreview");        function fnPreview() {
            var file = document.getElementById("file1");
            if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    ipv.src = evt.target.result;
                }
                reader.readAsDataURL(file.files[0]);
            } else {
                file.select();
                var src = document.selection.createRange().text;                ipv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
            }
        }        $(document).ready(function () {
            $('#imgPreview').click(function () {
                $('#imgPreview').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true });
            })
        });
    </script>
</body>
</html>

解决方案 »

  1.   

    后续说明 
    ----------------------------------
    忘了说imgAreaSelect插件的imgAreaSelect()没有执行成功，大家可以测试一下        $(document).ready(function () {
                $('#imgPreview').click(function () {
                    $('#imgPreview').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true });
                })
            });
      

  2.   

    http://hi.baidu.com/zwfec/item/feaa7ece8df24c3299b49897
      

  3.   

    http://www.189works.com/article-41618-1.html
      

  4.   

    你也可以用Jcrop拿我上面的代码做个示例出来给我，不知道这代表什么这里面的问题可能是和滤镜
    有关才导致我的imgAreaSelect方法没执行，Jcrop也用过。。当然可能是Jcrop我还不太会用，所以最好能
    用我上面的代码给个示例最好，谢谢！！
      

  5.   

    是这样吗？
    http://www.aspbc.com/demo/imgJcrop/aspx.html