数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > HTML教程 > HTML5

canvas 生成水印图片并通过PHP保存到本地

2015-01-19 09:20 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:HTML5 上一篇:Canvas API 之 drawImage 下一篇:html5 滑动手指 视图 屏幕 向上 向下 翻滚

预览:



主要代码(封装):
  1. (function(){ 
  2.         var Watermark = function(obj,img,options){//可选参数 
  3.                 this.can = obj; 
  4.                 this.text = options.text || ''
  5.                 this.arrImg = options.arrImg || ''
  6.                 this.left = options.left || 0; 
  7.                 this.width = options.width || 0; 
  8.                 this.height = options.height || 0; 
  9.                 this.top =  options.top || 0; 
  10.                 this.color = options.color || '#000'
  11.                 this.img = img; 
  12.                 this.family = options.family || '12px Microsoft YaHei'
  13.                 this.init(); 
  14.         }; 
  15.         Watermark.prototype = { 
  16.                 init:function(){ 
  17.                         this.draw(); 
  18.                 }, 
  19.                 draw:function(){  
  20.                         var canvas = this.can;  
  21.                         var ctx = canvas.getContext("2d"); 
  22.                         if(this.text){//如果是文本 
  23.                                 var oImg; 
  24.                                 if(typeof this.img == 'object'){//如果是img对象 
  25.                                         oImg = this.img; 
  26.                                         ctx.drawImage(oImg,0,0);//直接显示 
  27.                                 }else if(typeof this.img == 'string'){//如果传入的事路径 
  28.                                         var newImg = new Image();//创建图片 
  29.                                         newImg.src = this.img; 
  30.                                         oImg = newImg; 
  31.                                 }  
  32.                                 ctx.drawImage(oImg,0,0); 
  33.                                 ctx.font = this.family;//文字样式 
  34.                                 ctx.fillStyle = this.color;//设置文字颜色 
  35.                                 ctx.fillText(this.text,this.left,this.top); //追加文字 
  36.                         }else{//如果是水印图片 
  37.                                 ctx.drawImage(this.img,0,0);//直接在canvas上drawImage两个图片 
  38.                                 ctx.drawImage(this.arrImg,this.left,this.top,this.width,this.height); 
  39.                         } 
  40.                 }, 
  41.                 getImg:function() //获取图片路径 
  42.                 {          
  43.                         var image = this.can.toDataURL("image/png");   
  44.                         return image.substring(22); 
  45.                 }, 
  46.                 downImg:function() { //下载图片 
  47.                         var image = this.can.toDataURL("image/png").replace("image/png""image/octet-stream");  
  48.                         window.location.href=image;  
  49.                 } 
  50.         } 
  51.         window.Watermark = Watermark;         
  52. })() 

调用:

  1. //文字水印 
  2.         var img = new Watermark(canvas,newImgs,{text:'你大爷',left:50,top:50,color:'#fff',family:'italic small-caps bold 20px 楷体'
  3.                 width:newImgs2.width, 
  4.                 height:newImgs2.height 
  5.         }); 
  6.          
  7.         //图片水印 
  8.         var img2 = new Watermark(canvas1,newImgs,{arrImg:newImgs2,left:50,top:50, 
  9.                 width:newImgs2.width, 
  10.                 height:newImgs2.height 
  11.         }); 

参数预览:

  1. //参数设置 
  2.         /*{ 
  3.                 canvas == canvas对象 
  4.                 newImgs == img对象或img图片路径 
  5.                 { 
  6.                         text/arrImg : 文本 显示在图像上的文字/img对象(该参数如果传入text文本 将显示水印,如果传入arrImg对象 将显示传入的img)  
  7.                         left: 文字的left位置 
  8.                         top:文字的top文字 
  9.                         color:'文字的颜色' 
  10.                         family:'文字的样式--大小-字体--粗细' (注:这个根据css的 font属性来设置 font:...)         
  11.                 }         
  12.         }*/ 
  13.          
  14.         //方法 
  15.         //getImg()//获取图片的Base64编码路径 
  16.         //downImg()//下载图片 
  17.          
  18.         //var url = img.getImg();//获取图片路径并把该路径上传到后台 后台通过Base64解码 得到图片 

用过AJAX保存到本地

  1. function saveImg(url){ 
  2.                 $.ajax({ 
  3.                         url:'php/canvas.php'
  4.                         data:{img:url}, 
  5.                         type:'POST'
  6.                         success: function(msg){ 
  7.                                 alert(msg) 
  8.                         } 
  9.                 }); 
  10.         } 

php:

  1. $saveFile = 'down/'
  2. $imgurl = $_POST['img']; 
  3. $img = base64_decode($imgurl); 
  4. $t = time().'.jpg'
  5. $save = file_put_contents('../down/'.$t,$img); 
  6. if($save
  7. echo '保存成功'

下载(将文件解压到php坏境->www文件夹下直接运行index.html即可预览dome):

小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。