图片切割，图片裁切,该怎么解决-ASP.NET教程-爱易网页

图片切割，图片裁切,该怎么解决

日期：2014-05-17　浏览次数：20423 次

图片切割，图片裁切
我是要设计这样的一个功能，首先当浏览图片时能预览本地图片，然后对预览的图片进行裁切，最后点击保存在本地磁盘中。
但是现在出现了问题，由于在预览本地图片时浏览的安全机制导致我使用了滤镜来完成了本地图片预览
但是在图片裁切时发现我用的几个jq插件的裁切功能无法正确使用。
在此想问大家应如何来做？

HTML code


<%@ 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>

------解决方案--------------------
http://hi.baidu.com/zwfec/item/feaa7ece8df24c3299b49897
------解决方案--------------------
发现我的js知识还是很少啊，帮不料忙
------解决方案--------------------
是这样吗？
http://www.aspbc.com/demo/imgJcrop/aspx.html

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

图片切割，图片裁切,该怎么解决

相关资料更多>

推荐阅读更多>