js实现ie、chrome图片旋转，添加水印

最新推荐文章于 2022-03-17 15:27:34 发布

chifadian6932

最新推荐文章于 2022-03-17 15:27:34 发布

阅读量508

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2915681/blog/974031

版权

图片旋转：每点击一次，旋转90度；

添加水印：在图片上覆盖一层div，设置背景。

旋转：

Internet Explorer 6-Internet Explorer 8支持filter属性。

if(isIE == 1) {
    image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
    if(i%2 == 1 && (imgWidth>imgHeight)) {
        imgPanel.style.height = imgWidth + "px";
    } else if (i%2 == 1 && (imgHeight>imgWidth)) {
        imgPanel.style.width = imgHeight + "px";
    }
}

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换

degree = i*90;
//浏览器为谷歌浏览器或者safiri
if ((userAgent.indexOf("Chrome") > -1) || (userAgent.indexOf("Safari") > -1)) {
    image.style.webkitTransform = "rotate("+degree+"deg)";
} else if(userAgent.indexOf("FireFox") > -1) {//浏览器为FireFox
    image.style.MozTransform = "rotate("+degree+"deg)";
} else if (userAgent.indexOf("Oprea") > -1) {//浏览器为Opera
    image.style.OTransform = "rotate("+degree+"deg)";
}

水印

设置水印css样式

position: absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

margin-top 属性设置元素的上外边距。

Z-index 可被用于将在一个元素放置于另一元素之后，将水印置于最顶层

.waterMarked{
    display: inline-block; 
    position: absolute;
    top: 0px;
    width: 320px;
    height: 180px;
    left: 0px;
    filter:alpha(opacity=50);
    opacity:0.5;
    background-image:url(qsmy1.jpg);
}

function waterMarked(){
        var div = document.getElementById("imgPanel");
        var width = div.offsetWidth*0.98;
        var heigth = div.offsetHeight*0.98;
        styleString = "margin-left:360px;width:"+ width +"px;height:"+ heigth +"px;z-index:99999;top:0px";
        //追加水印div
        $("#image").after('<div id="shuiYinDiv" style='+styleString+' class="waterMarked">');
    }

完整示例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Turn And WaterMarked</title>
 </head>
 <style type="text/css">
    .waterMarked{
    display: inline-block; 
    position: absolute;
    top: 0px;
    width: 320px;
    height: 180px;
    left: 0px;
    filter:alpha(opacity=50);
    opacity:0.5;
    background-image:url(qsmy1.jpg);
}
</style>
 <body style=" text-align:center">
  <div id="imgPanel" style="margin:0 auto; width:640px;height:360px;z-index:1;"> 
    <img id="image" style="width:640px;height:360px;" src=".../整理/001-002-03.jpg" align="center">  
  </div>
  <button type="button" onClick="turnImage()">旋转</button>
  <button type="button" onClick="waterMarked()">显示水印</button>
 </body>
 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">

    var i=1;
    //取得浏览器的userAgent字符串
    var userAgent = navigator.userAgent;
    //旋转角度
    var degree;
    //图片初始化高度
    var initHeight;
    //图片初始化宽度
    var initWidth;
    function turnImage() {
        var image = document.getElementById("image");
        var imgPanel = document.getElementById("imgPanel");
        var isIE = (document.uniqueID)?1:0;
        if (initHeight == null) {
            initHeight = imgPanel.offsetHeight;
        }
        if (initWidth == null) {
            initWidth = imgPanel.offsetWidth;
        }
        var imgWidth = imgPanel.offsetWidth;
        var imgHeight = imgPanel.offsetHeight;
        if(isIE == 1) {
            image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
            if(i%2 == 1 && (imgWidth>imgHeight)) {
                imgPanel.style.height = imgWidth + "px";
            } else if (i%2 == 1 && (imgHeight>imgWidth)) {
                imgPanel.style.width = imgHeight + "px";
            }
        } else {
            degree = i*90;
            //浏览器为谷歌浏览器或者safiri
            if ((userAgent.indexOf("Chrome") > -1) || (userAgent.indexOf("Safari") > -1)) {
                image.style.webkitTransform = "rotate("+degree+"deg)";
            } else if(userAgent.indexOf("FireFox") > -1) {//浏览器为FireFox
                image.style.MozTransform = "rotate("+degree+"deg)";
            } else if (userAgent.indexOf("Oprea") > -1) {//浏览器为Opera
                image.style.OTransform = "rotate("+degree+"deg)";
            }
            if (initWidth > initHeight) {
                if (i%2 == 1) {
                    imgPanel.style.height = imgWidth + "px";//FireFox浏览器必须加单位px
                } else {
                    if (initHeight != null) {
                        imgPanel.style.height = initHeight + "px";
                    }
                }
            } else if (initWidth < initHeight) {
                if (i%2 == 1) {
                    imgPanel.style.width = imgHeight + "px";
                } else {
                    imgPanel.style.width = initWidth + "px";
                }
            }
        }
        i++;
        if(i>3) {i=0}
    }

    /**
     * 水印
     * @param
     */
    function waterMarked(){
        var div = document.getElementById("imgPanel");
        var width = div.offsetWidth*0.98;
        var heigth = div.offsetHeight*0.98;
        styleString = "margin-left:360px;width:"+ width +"px;height:"+ heigth +"px;z-index:99999;top:0px";
        //追加水印div
        $("#image").after('<div id="shuiYinDiv" style='+styleString+' class="waterMarked">');
    }
 </script>
</html>

转载于:https://my.oschina.net/u/2915681/blog/974031

chifadian6932

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现ie、chrome图片旋转，添加水印

图片旋转：每点击一次，旋转90度；添加水印：在图片上覆盖一层div，设置背景。旋转： Internet Explorer 6-Internet Explorer 8支持filter属性。 if(isIE == 1) { image.style.filter="progid...
复制链接

扫一扫