clip:rect图片剪裁效果预览实例页面

展示

代码

CSS代码：

.l{float:left;}
.img{margin-top:30px; position:absolute;}
            

HTML代码：

<div class="l">
    <img id="cropTestImg" src="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg" height="381" />
</div>
<img id="rectTestImg" class="img" src="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg" /> 
            

JS代码：

<script type="text/javascript" src="/study/js/excanvas.js"></script>
<script type="text/javascript" src="/study/js/zxx.crop_rotation.js"></script>
<script>
var $ = function(id) {
    return document.getElementById(id);
};
var oCropImg = $("cropTestImg"), oRectImg = $("rectTestImg");
fnImageCropRot(oCropImg);

setInterval(function() {
    var cropPosX = parseInt($("cropPosX").value) || 0,
        cropPosY = parseInt($("cropPosY").value) || 0,
        cropImageWidth = parseInt($("cropImageWidth").value) || 0,
        cropImageHeight = parseInt($("cropImageHeight").value) || 0;
        
    oRectImg.style.clip = "rect("+ cropPosY + "px "+ (cropImageWidth + cropPosX) +"px "+ (cropImageHeight + cropPosY) +"px "+ cropPosX +"px)";
}, 100);
</script>