圖片查看__實現旋轉,拖拽,放大,縮小 圖片(旋轉/縮放/翻轉)變換效果(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()方法在頁面加載時執行。

最終效果圖片:


 





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章