领悟旧事--木头云之

为图片自动添加水印

来源：http://www.xx0594.com/
时间：2018-6-4
作者：浏览人数:1007

//2018-05-30加入图片自动添加水印。
//查找Class="AutoSize Img"下的TagName为Img的的图片。 <span class="AutoSize Img"><img src="/upload/LinliXian/20160910linbiejici.jpg" alt=""></span>

$( document ).ready(function() {
var TextMsg="XX0594.COM";//水印内容。
    var mImg = document.getElementsByClassName("AutoSize Img");
var pc = document.getElementById("pcLogo");
for(var m=0;m<mImg.length;m++){
  tmpImg = mImg[m].getElementsByTagName("Img");
  for(var n=0;n<tmpImg.length;n++){
   var img = new Image();
   img.src = tmpImg[n].getAttribute("src");
        //img.onload=function(){
         //准备canvas
         var canvas=document.createElement("Canvas");
   canvas.width=img.width;
   canvas.height=img.height;
   canvas.id="MyCanas"+ m;
   canvas.style.display="none";//不显示。
   //$(document.body).append(canvas);
         var context=canvas.getContext("2d");
          // 绘制图片
         context.drawImage(img,0,0);
         // 绘制水印，计算位置为画布的中央。浮雕。
         if(pc != null) context.font="30px microsoft yahei";
   else context.font="40px microsoft yahei";
   var metrics = context.measureText(TextMsg);
   var posX=(img.width  - metrics.width) /2;
   var posY=img.height/2;
         context.fillStyle = "rgba(0,25,55,0.5)";
         context.fillText(TextMsg,posX,posY);
   context.fillStyle = "rgba(255,255,255,0.5)";
         context.fillText(TextMsg,posX+2,posY+2);
      var picData=canvas.toDataURL("image/png");
         tmpImg[n].setAttribute("src",picData);
   //}
  }
   }
});

【关闭窗口】