图片剪裁与旋转js使用实例页面

展示

代码

HTML代码：

<p><button id="cropBeginBtn">图片处理</button></p>
<img id="cropTestImg" src="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
<p><button id="cropEndBtn" style="display:none; position:relative; z-index:1;">确认处理</button></p>
            

JS代码：

<script type="text/javascript" src="/study/js/excanvas.js"></script>

<script type="text/javascript" src="/study/js/zxx.crop_rotation.js"></script>
<script type="text/javascript">
window.onload = function(){
    var oImg = document.getElementById("cropTestImg");
    var oEndBtn = document.getElementById("cropEndBtn");
    document.getElementById("cropBeginBtn").onclick = function(){
        fnImageCropRot(oImg);
        oEndBtn.style.display = "inline-block";
    };    
    oEndBtn.onclick = function(){
        var x = document.getElementById("cropPosX").value, y = document.getElementById("cropPosY").value, w = document.getElementById("cropImageWidth").value, h = document.getElementById("cropImageHeight").value, angle = document.getElementById("zxxRotAngle").value;
        if(angle === ""){
            angle = 0;    
        }
        alert("角度："+angle+"\n剪裁横坐标："+x+"\n剪裁纵坐标："+y+"\n剪裁宽度："+w+"\n剪裁高度："+h);
    };
};
</script>