网页图形绘制：图片水印
一、实验目标：
- 掌握 Canvas 的基本用法。
- 掌握 Canvas 图片引用的方法。
- 掌握使用 Canvas 绘制文本的方法。
- 掌握 Canvas 图形变形的方法。
- 综合应用 Canvas 绘图技术，开发图片水印。
二、实验任务
使用 <canvas>标签结合 JS 制作带水印的图片，页面效果如下所示：
三、设计思路
在Web前端开发中，使用Canvas设计图片水印是一个常见的需求。下面是一个基本的设计思路简述：
3.1. 确定水印内容和样式
-
- 内容：水印可以是文字、图片或二者的结合。例如，你可能希望在图片的某个角落添加“版权所有”的文字水印，或者在图片的中央放置一个半透明的LOGO图片作为水印。
- 样式：设置水印的字体、大小、颜色、透明度、旋转角度等属性。对于图片水印，还需要考虑其大小和透明度。
3.2. 创建Canvas元素
-
- 在HTML中创建一个
<canvas>元素，并为其设置适当的宽度和高度，以匹配需要添加水印的图片尺寸。 - 获取Canvas的2D渲染上下文，以便进行后续的绘图操作。
- 在HTML中创建一个
3.3. 加载图片
-
- 使用
new Image()创建一个Image对象，并设置其src属性为需要添加水印的图片的URL。 - 监听Image对象的
onload事件，确保图片加载完成后再进行水印的绘制。
- 使用
3.4. 绘制水印
-
- 在
onload事件处理函数中，使用Canvas的绘图API绘制水印。 - 对于文字水印，可以使用
fillText()或strokeText()方法绘制文字。可以设置文字的字体、大小、颜色、位置等属性。 - 对于图片水印，可以使用
drawImage()方法将图片绘制到Canvas上。可以设置图片的位置、大小、透明度等属性。 - 如果需要多个水印，可以重复绘制操作，调整水印的位置和属性。
- 在
3.5. 应用水印到图片
-
- 绘制完水印后，使用
toDataURL()方法将Canvas的内容转换为图片URL。 - 可以将这个URL设置为
<img>元素的src属性，或者直接在CSS中使用作为背景图片，从而显示带有水印的图片。
- 绘制完水印后，使用
3.6. 优化与扩展
-
- 性能优化：对于大型图片或大量水印，可以考虑使用离屏Canvas进行绘制，以减少页面重绘和提高性能。
- 扩展功能：可以添加更多的交互功能，如允许用户自定义水印内容、样式和位置等。
- 兼容性处理：考虑到不同浏览器的Canvas实现可能存在差异，需要进行必要的兼容性处理。
3.7. 注意事项
-
- 跨域问题：如果图片来自不同的域，可能会遇到跨域问题。确保图片服务器支持CORS（跨源资源共享）或使用其他方法解决跨域问题。
- 安全性：在处理用户上传的图片时，要确保对图片进行适当的验证和过滤，以防止恶意内容的注入。
4、实验实施（跟我做）
4.1、步骤一、创建项目和文件
创建项目watermark，并在项目中创建index.html页面文件，目录结构如下：
4.2、步骤二、准备 Canvas 环境
在 index.html 页面文件的 <body> 标签中添加 <canvas> 标签，定义容器大小（宽度、高度），定义容器 ID 未 "myCanvas"。代码如下：
标签：Canvas,网页,水印,使用,属性,绘制,图片 From： https://www.cnblogs.com/zuoyang/p/18118490