你的位置:首页 > 软件开发 > ASP.net > 自定义截取图片保存

自定义截取图片保存

发布时间:2016-10-13 22:00:04
当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求。参照牛人的项目,和同事的改造,终于是像点样子了截图大致截为3个像素,每个像素使用的地方也不同,考虑图片不会是很多,分别压缩保存下来。   根据截取的像素位置,对应的压缩成相应的图片: 首先需要下载 ...

 

  当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求。参照牛人的项目,和同事的改造,终于是像点样子了

截图大致截为3个像素,每个像素使用的地方也不同,考虑图片不会是很多,分别压缩保存下来。 

  根据截取的像素位置,对应的压缩成相应的图片:

自定义截取图片保存

 

首先需要下载Jcrop.js与uploadify.js 上传图片的插件和截图的插件

前台页面

 

自定义截取图片保存自定义截取图片保存
<script src='/images/loading.gif' data-original="~/Scripts/uploadify/jquery.uploadify-3.1.min.js"></script><script src='/images/loading.gif' data-original="~/Scripts/Jcrop/jquery.Jcrop.min.js"></script><script src='/images/loading.gif' data-original="~/Scripts/Comm_UploadJcrop.js"></script><script type="text/javascript">  $(document).ready(function () {    //上传图片    UploadImg("file_uploadImg", false, "LoadJcropImage",true);    //加载当前头像    var currentHeader= $("#hf_CurrentUserHeader").val();    if (currentHeader.length > 0 && currentHeader != "/Images/defaultHeader.png")      SetJcropImage(currentHeader.replace(/_JQ/,"_YS"));  })  function LoadJcropImage (file, data, response) {    var url = eval("(" + data + ")");    SetJcropImage(url);  }</script><div class="DivContainer">  <input type="hidden" value="@ViewBag.CurrentHeader" id="hf_CurrentUserHeader" />  <input type="file" name="file_uploadImg" id="file_uploadImg" />  <div class="DataNormalTable_SpanTip div_NoFileTip">请先上传图片</div>  <div class="UploadImgContainer" style="display:none;">    <table cellpadding="0" cellspacing="0">      <tr>        <td rowspan="2" valign="middle" align="center" class="MainLargeTd">          <div class="DivContainer">            <img id="preview_large"  />          </div>        </td>        <td align="center" height="160">          <div class="Header_Img headBoxStyle" style="overflow:hidden;">            <img id="preview_large3" style="width:100%; height:100%;" />          </div>        </td>      </tr>      <tr>        <td valign="top" align="center">          <div class="BigHeader_Img headBoxStyle" style="overflow:hidden;">            <img id="preview_large2" style="width:100%; height:100%;" />          </div>        </td>      </tr>    </table>    <div id="crop_operation">      <input type="hidden" name="x" id="x">      <input type="hidden" name="y" id="y">      <input type="hidden" name="w" id="w">      <input type="hidden" name="h" id="h">      <input type="hidden" name="imgsrc" id="imgsrc">    </div>  </div></div>

原标题:自定义截取图片保存

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。