一、参考
博客园： 图片(旋转/缩放/翻转)变换效果(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完美实现同时拖拽、旋转、放大缩小图片的手势操作
