圖片查看__實現旋轉，拖拽，放大，縮小

一、參考

博客園： 圖片(旋轉/縮放/翻轉)變換效果(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)