canvas实现给图片与文本加水印

更新时间：2024年12月16日 11:06:29 作者：irisMoon06

这篇文章主要为大家详细介绍了如何使用canvas实现给图片与文本加水印功能,文中的示例代码讲解详细,有需要的小伙伴可以参考一下

先弄出一个canvas

<!DOCTYPE html>
<html>
<head>
<title>Canvas API 示例</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
  您的浏览器不支持Canvas。
</canvas>
<script type="text/javascript">
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#ff0000";
  ctx.beginPath();
  ctx.arc(100, 100, 70, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
</script>
</body>
</html>

在开始创建文本水印之前，我们需要先搭建Canvas环境并获取其上下文（context）。Canvas API提供了2D渲染上下文，我们可以通过它来绘制文本、图形等元素。以下是如何设置Canvas环境和获取上下文的步骤：

// 获取Canvas元素
const canvas = document.getElementById('myCanvas');
 
// 获取Canvas的2D渲染上下文
const ctx = canvas.getContext('2d');
 
// 设置Canvas尺寸
canvas.width = window.innerWidth; // 适应窗口宽度
canvas.height = window.innerHeight; // 适应窗口高度

接下来，我们将进行文本水印的参数配置和渲染流程。文本水印涉及到的参数主要包括文本内容、字体样式、字体大小、颜色以及文本的位置等。

// 设置文本水印参数
const text = "水印文本"; // 文本内容
const font = "20px Arial"; // 字体样式和大小
const color = "rgba(0, 0, 255, 0.5)"; // 颜色（带透明度）
const textX = 10; // 文本的X坐标
const textY = 30; // 文本的Y坐标
 
// 渲染文本水印
ctx.font = font; // 设置字体
ctx.fillStyle = color; // 设置填充颜色
ctx.fillText(text, textX, textY); // 绘制文本

设计文本水印时，字体、大小和颜色是三个至关重要的参数。通过调整这些参数，我们能够控制文本水印的外观和可读性，以便更好地符合设计需求。

// 设置不同的字体、大小和颜色
const fonts = ['Arial', 'Times New Roman', 'Consolas', 'Courier New'];
const sizes = ['16px', '20px', '24px', '28px'];
const colors = [
    'rgba(0, 0, 0, 0.5)',
    'rgba(255, 0, 0, 0.5)',
    'rgba(0, 255, 0, 0.5)',
    'rgba(0, 0, 255, 0.5)'
];
 
// 随机选择字体样式、大小和颜色
let randomFont = fonts[Math.floor(Math.random() * fonts.length)];
let randomSize = sizes[Math.floor(Math.random() * sizes.length)];
let randomColor = colors[Math.floor(Math.random() * colors.length)];
 
// 渲染文本水印
ctx.font = `${randomSize} ${randomFont}`; // 设置随机字体和大小
ctx.fillStyle = randomColor; // 设置随机颜色
ctx.fillText(text, textX, textY);

除了字体、大小和颜色，文本布局和对齐方式也是设计文本水印时需要考虑的因素。它们直接影响到文本的展示效果和阅读体验。

// 设置文本的对齐方式
ctx.textAlign = 'center'; // 水平居中对齐
ctx.textBaseline = 'middle'; // 垂直居中对齐
 
// 渲染文本水印
ctx.fillText(text, canvas.width / 2, canvas.height / 2); // 在Canvas中心位置绘制文本

在某些情况下，我们可能需要处理文本内容过长导致的换行和溢出问题。通过调整Canvas的文本绘制方法，我们可以实现文本的自动换行，并通过设置裁剪区域来处理溢出。

// 设置文本换行
ctx.textAlign = 'start'; // 文本左对齐
ctx.textBaseline = 'top'; // 文本顶部对齐
ctx.direction = 'rtl'; // 文本方向从右到左
 
// 设置裁剪区域，防止文本溢出Canvas边界
ctx.canvas.width = 300; // 设置Canvas宽度
ctx.canvas.height = 200; // 设置Canvas高度
ctx.clip(); // 应用裁剪区域
 
// 渲染文本水印
const longText = "这是一段很长很长的文本，可能会导致换行，我们需要正确处理这种情况，确保文本能够在Canvas中正确显示。";
ctx.fillText(longText, 10, 10);

由于图片资源通常较大，若在页面加载时同步加载所有图片，将导致页面渲染时间过长，用户体验差。因此，采用异步加载是解决这一问题的有效方法。使用 Image 对象的 onload 事件可以监控图片加载状态。

var img = new Image();
img.onload = function() {
  console.log('图片加载完成');
  // 绘制图片水印的代码可以在这里执行
};
img.onerror = function() {
  console.log('图片加载失败');
};
img.src = 'path/to/your/image.png'; // 异步加载图片

在复杂的Web应用中，合理管理图片资源的缓存策略是提高性能的关键。合理使用浏览器缓存可以减少服务器请求次数，加快页面加载速度。设置合理的HTTP缓存头（例如 Cache-Control ）是一个有效的方法。

function preloadImages(imagesArray) {
  var loadedImages = [];
  var imagesToLoad = imagesArray.length;
 
  imagesArray.forEach(function(imageUrl) {
    var img = new Image();
    img.onload = function() {
      loadedImages.push(img);
      imagesToLoad--;
      if (imagesToLoad === 0) {
        // 所有图片加载完成
        console.log('所有图片加载完毕');
      }
    };
    img.onerror = function() {
      console.log('图片加载错误');
    };
    img.src = imageUrl;
  });
}

在Canvas中绘制图片水印首先需要确定图片的坐标位置和尺寸。通常，我们希望水印覆盖整个画布，或者在特定位置显示。下面是一个设置图片水印坐标的示例代码：

function drawImageWatermark(ctx, img, x, y, width, height) {
  // 保持图片纵横比
  var imgRatio = img.width / img.height;
  var canvasRatio = ctx.canvas.width / ctx.canvas.height;
 
  if (canvasRatio < imgRatio) {
    width = ctx.canvas.width; // 宽度设置为画布宽度
    height = width / imgRatio; // 高度按比例缩放
  } else {
    height = ctx.canvas.height; // 高度设置为画布高度
    width = height * imgRatio; // 宽度按比例缩放
  }
 
  // 绘制图片
  ctx.drawImage(img, x, y, width, height);
}

图片水印通常需要一定透明度以避免完全覆盖底下的内容。另外，不同的Canvas合成模式可以帮助我们创建独特的视觉效果。下面是如何设置图片水印透明度和使用合成模式的代码示例：

function applyWatermark(ctx, img) {
  // 设置透明度
  ctx.globalAlpha = 0.5;
  // 设置混合模式，这里用的是destination-atop，确保水印在内容之上但不是完全覆盖
  ctx.globalCompositeOperation = 'destination-atop';
 
  // 绘制图片水印
  ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
  // 清除设置，不影响后续绘制
  ctx.globalAlpha = 1;
  ctx.globalCompositeOperation = 'source-over';
}

以上就是canvas实现给图片与文本加水印的详细内容，更多关于canvas图片文本加水印的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScrip数组删除特定元素的几种方法总结
从js数组中删除指定元素是我们每个人都遇到的问题，网上这方面的资料也很多，但有的时间过于久远，有的内容不够全面，所以自己来整理下，这篇文章主要给大家总结介绍了关于JavaScrip数组删除特定元素的多种方法，需要的朋友可以参考下。
2017-09-09
微信小程序实现自定义弹窗组件的示例代码
这篇文章主要介绍了微信小程序中实现自定义一个带确定取消的弹窗组件的方法，文中的示例代码讲解详细，对我们学习小程序开发有一定帮助，需要的可以参考一下
2022-06-06
webpack4.0打包优化策略整理小结
这篇文章主要介绍了webpack4.0打包优化策略整理小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
前端base64与图片相互转换(附代码)
有时候会遇到要把前端发送过来的图片的文件base64编码转化成图片,所以下面这篇文章主要给大家介绍了关于前端base64与图片相互转换的相关资料,需要的朋友可以参考下
2023-09-09
VS Code转换大小写、修改选中文字或代码颜色的方法
最近在使用VS Code，发现了不少使用的小技巧，觉着有必要给大家分享下，下面这篇文章主要给大家介绍了关于VS Code转换大小写、修改选中文字或代码颜色的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-12-12
微信小程序 css使用技巧总结
这篇文章主要介绍了微信小程序 css使用技巧总结的相关资料,需要的朋友可以参考下
2017-01-01
Bootstrap打造一个左侧折叠菜单的系统模板(一)
这篇文章主要介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一)的相关资料,需要的朋友可以参考下
2016-05-05
el-date-picker 限制开始时间和结束时间的代码实现
在Vue.js中使用Element UI库的el-date-picker组件时,可以通过设置picker-options来限制开始时间和结束时间的选择范围,下面通过例子介绍el-date-picker 限制开始时间和结束时间的实现,感兴趣的朋友一起看看吧
2024-08-08
echarts中图例右置且竖排完整代码
这篇文章主要给大家介绍了关于echarts中图例右置且竖排的相关资料,Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发,需要的朋友可以参考下
2023-08-08
js控制框架刷新
一句话控制框架的刷新
2008-08-08

canvas实现给图片与文本加水印

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具