我是要设计这样的一个功能,首先当浏览图片时能预览本地图片,然后对预览的图片进行裁切,最后点击保存在本地磁盘中。
但是现在出现了问题,由于在预览本地图片时浏览的安全机制导致我使用了滤镜来完成了本地图片预览
但是在图片裁切时发现我用的几个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