图片查看

it2022-05-06  0

一、参考

博客园: 图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)    根据具体 需求 ,将鼠标移动拖动图片旋转变成了拖动图片,并且删除、修改了一些按钮操作;

二、功能

图片通过 base64显示,包括图片的查看,旋转,放大,缩小,拖拽,重置。

三、实现

前台aspx代码:

<style> #imageContainer { border:1px solid #000; width:100%; height:500px; background:#FFF center no-repeat; } </style> <tr id="tr_CertImg" runat="server"> <td class="table-control5" colspan="4"> <div> <div><br><h3>施工许可证书上传图片:</h3></div> <div id="imageContainer"></div> <input id="idLeft" type="button"class="btn btn-default" value="向左旋转"/> <input id="idRight" type="button"class="btn btn-default" value="向右旋转"/> <input id="idReset" type="button"class="btn btn-default" value="重置"/> </div> </td> </tr> <script src="../../../../../js/CJL.0.1.min.js"></script> <script src="../../../../../js/ImageTrans.js"></script> <script> function canvasSupport(){ return!!document.createElement('canvas').getContext; } (function (){ var container = $$("imageContainer"), src ="<%=Convert.ToString(ViewState["imageurl"])%>", options ={ onPreLoad: function (){ container.style.backgroundImage ="url('http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif')";}, onLoad: function (){ container.style.backgroundImage ="";}, onError: function (err){ container.style.backgroundImage ="";} }, it =newImageTrans(container, options); it.load(src); //左旋转 $$("idLeft").onclick = function (){ it.left();} //右旋转 $$("idRight").onclick = function (){ it.right();} //重置 $$("idReset").onclick = function (){ it.reset();} })() </script>

 

后台CS代码:

private void GetImg(Epoint.MisBizLogic2.Data.MisGuidRow oRow) { //将数据库中的image类型(即byte流)的数据取出转base64直接赋值给前台img标签的scr if(DBNull.Value!= oRow["CertScanFileContent"]&&DBNull.Value!= oRow["CertScanFileContent_ContentType"]&& oRow["CertScanFileContent"]!= null && oRow["CertScanFileContent_ContentType"]!=null) { string imageContent =Convert.ToBase64String((byte[])oRow["CertScanFileContent"]); string imageType =Convert.ToString(oRow["CertScanFileContent_ContentType"]); StringBuilder sbUrl =newStringBuilder(); sbUrl.AppendFormat("data:image/{0};base64,{1}", imageType, imageContent); ViewState["imageurl"]= sbUrl.ToString(); tr_CertImg.Visible=true; } else { tr_CertImg.Visible=false; } }

 

注:GetImg()方法在页面加载时执行。

最终效果图片:

 

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/zerodai/p/5706449.html

相关资源:js完美实现同时拖拽、旋转、放大缩小图片的手势操作

最新回复(0)