您的位置：首页 > Web前端 > JavaScript

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

2017-07-11 17:24 645 查看

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

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Watermarks</title>
</head>

<body>
<div>
<canvas id="myCanvas" width="1000" height="500" >您的浏览器不支持Canvas</canvas>
<img id="img" src="{{url($url)}}" style="display: none">
</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas javascript

相关文章推荐

新的分享

章节导航