当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求。参照牛人的项目,和同事的改造,终于是像点样子了截图大致截为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
(#换成@)。