js应用：使用canvas给图片加水印_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

js应用：使用canvas给图片加水印

字号+ 作者：H5之家来源：H5之家 2017-07-16 18:01 我要评论( )

本片文章介绍一个简单的使用js制作水印图片的方法，根据代码中的注释很容易理解：!DOCTYPEhtmlhtmllang=

本片文章介绍一个简单的使用js制作水印图片的方法，根据代码中的注释很容易理解：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Watermarks</title> </head> <body> <div> <canvas >您的浏览器不支持Canvas</canvas> <img src="{{url($url)}}"> </div> <script> //新建img对象 var img = new Image(); //为新建的img赋值src var mImg = document.getElementById("img"); img.src = mImg.getAttribute('src'); // img加载完成 img.onload=function(){ //准备canvas var canvas=document.getElementById("myCanvas"); var context=canvas.getContext("2d"); // 绘制图片 context.drawImage(img,0,0); // 绘制水印 context.font="20px microsoft yahei"; context.fillStyle = "rgba(255,255,255,0.5)"; context.fillText("my images",100,100); } </script> </body>