图片添加水印

cc_day

1. <?xml version="1.0" encoding="utf-8"?>
   
2. 
   
3. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;"
   
4.   xid="window" class="window">  
   
5.   <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;"
   
6.     onLoad="modelLoad"/>  
   
7.   <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
   
8.     xid="panel1">
   
9.     <div class="x-panel-top" xid="top1">
   
10.       <div component="$UI/system/components/justep/titleBar/titleBar" title="图片添加水印"
    
11.         class="x-titlebar">
    
12.         <div class="x-titlebar-left">
    
13.           <a component="$UI/system/components/justep/button/button" label=""
    
14.             class="btn btn-link btn-only-icon" icon="icon-chevron-left" onClick="{operation:'window.close'}"
    
15.             xid="backBtn">
    
16.             <i class="icon-chevron-left"/>  
    
17.             <span/>
    
18.           </a>
    
19.         </div>  
    
20.         <div class="x-titlebar-title">图片添加水印</div>  
    
21.         <div class="x-titlebar-right reverse"/>
    
22.       </div>
    
23.     </div>  
    
24.     <div class="x-panel-content" xid="content1">
    
25.       <div xid="div1">
    
26.         <canvas id="myCanvas"/>
    
27.       </div>
    
28.     </div>
    
29.   </div>
    
30. </div>
    

复制代码

1. define(function(require) {
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4. 
   
5.         var Model = function() {
   
6.                 this.callParent();
   
7.         };
   
8. 
   
9.         Model.prototype.modelLoad = function(event) {
   
10.                 var self = this;
    
11.                 var img = new Image();
    
12.                 img.src = require.toUrl('picture.jpg');// 图片路径
    
13. 
    
14.                 // 加载完成开始绘制
    
15.                 img.onload = function() {
    
16.                         // 准备canvas环境
    
17.                         var canvas = document.getElementById("myCanvas");
    
18.                         canvas.width = 383;
    
19.                         canvas.height = 579;
    
20.                         var ctx = canvas.getContext('2d');
    
21.                         // 绘制图片
    
22.                         ctx.drawImage(img, 0, 0, 383, 579);
    
23.                         // 绘制水印
    
24.                         ctx.font = "20px Georgia";
    
25.                         ctx.fillStyle = "rgba(255,255,255,1)";
    
26.                         ctx.fillText("Hello World!", 10, 50);
    
27. 
    
28.                         ctx.font = "30px Verdana";
    
29.                         // 创建渐变
    
30.                         var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    
31.                         gradient.addColorStop("0", "magenta");
    
32.                         gradient.addColorStop("0.5", "blue");
    
33.                         gradient.addColorStop("1.0", "red");
    
34.                         // 用渐变填色
    
35.                         ctx.fillStyle = gradient;
    
36.                         ctx.fillText("2016/06/28", 10, 90);
    
37.                 };
    
38.         };
    
39. 
    
40.         return Model;
    
41. });

复制代码

利用canvas给图片添加水印，很简单的一种实现方式。

cc_day

如图

郭德成