js初级应用之canvas制作图片水印
在canvas出现之前，项目中的图片添加水印的需求，必定是后端同学们来处理的，但是canvas出来之后，前端终于可以站出来说，这个需求，交给我来！壮哉我大前端~，上周的任务就是在前端处理水印的效果，这个效果最重要的逻辑其实就几行代码，至于如何优雅的将这些简单的逻辑封装成方法并入公司的前端库，应该是一个仁者见仁智者见智的问题，在此不表。
好了，废话不表，开始干活。
在html中准备canvas环境
<canvas id="myCanvas" width="1000" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
加载图片,这张图片有可能是已经存在的，也有可能是从后端通过ajax取过来的，不管是哪种方式，我们都需要一个img对象来保存这张图,在例子中，我们从后台取过来一张url为./img/demo.jpg的图片
var img = new Image(); img.src = './img/demo.jpg';
在图片加载完成之后，调用canvas的drawImage(),将我们的图片绘制在canvas的图层上面
img.onload=function(){ var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); ctx.drawImage(img,0,0); }
注意，调用drawImage()函数之前，请确保你的图片已经加载ok，否则你会看到canvas是空白的，这是因为在图片还没有绝对加载到页面之前，你直接调用了drawImage(),而这个时候，img对象还是空的。
在canvas上绘制好图片之后，回到onload函数中，利用我们在上一步中获取的ctx对象，继续绘制水印，font属性可以自定义水印的大小以及字体，fillStyle()方法可以自定义水印的颜色以及透明度，fillStyle()则完成最后的填充以及水印的位置定位
ctx.font="20px microsoft yahei"; ctx.fillStyle = "rgba(255,255,255,0.5)"; ctx.fillText("my images",100,100);
ok，如果你进行到这一步，初步的水印效果应该以及达成了，如果你还需要更多的效果，那就赶快去看canvas的api吧，上图，看看我的水印
最后，贴一个源代码，想看到效果的同学，直接拷贝我的html代码，将里面的图片url替换成你本地的url，就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
//准备img对象
var img = new Image();
img.src = './img/demo.jpg';
// 加载完成开始绘制
img.onload=function(){
//准备canvas环境
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
// 绘制图片
ctx.drawImage(img,0,0);
// 绘制水印
ctx.font="20px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);
}
</script>
</body>
好的代码像粥一样，都是用时间熬出来的
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· ［.NET］调用本地 Deepseek 模型
· 一个费力不讨好的项目，让我损失了近一半的绩效！
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）
2018-10-21 从HR 到SBP其实还有很长的一段路要走
2018-10-21 使用 InstallShield 制作 Delphi 软件安装包
2018-10-21 在64位系统上部署BDE的要点
2018-10-21 SQL SERVER 存储过程中SELECT 返回值如何赋值给变量
2018-10-21 sql语句中的insert 和 insert into 的区别？into有什么用？
2018-10-21 SqlServer中存储过程中将Exec的执行结果赋值给变量输出
2018-10-21 如何在存储过程中执行set命令 我来答