关灯
开启左侧

为图片添加水印

[复制链接]
紫米 发表于 2018-11-22 15:00:36 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
之前和大家分享了通过canvas实现二维码,今天分享利用canvas的fillText和drawImage给图片加水印(水印的细节可自行设置)。

html代码:
  1. <canvas id="canvas" width="500" height="500"></canvas>
复制代码
canvas的宽高可以根据需要添加水印的图片自行设置。


JS代码:
  1. var img = new Image();   // 创建img元素
  2.     var canvas = document.getElementById('canvas');
  3.     var ctx = canvas.getContext('2d');
  4.     img.src = 'duorou.jpg';

  5.     img.onload = function(){
  6.   ctx.drawImage(img, 20, 20);
  7.   ctx.font="30px yahei";   //设置水印文字
  8.   ctx.fillText("国信安", 30, 30)
  9.     }
复制代码


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )