图片的添加水印、文件转图片、图片转文件、html2canvas截屏功能

2023-10-03 13:06:41

图片添加水印

图片添加水印是一种常见的图片处理技术，可以在图片上添加文字、图片或其他元素作为水印，以保护图片的版权或增加图片的美观性。在 JavaScript 中，可以使用 Canvas API 来实现图片添加水印的功能。

代码示例

// 创建一个新的canvas元素
var canvas = document.createElement("canvas");

// 将图片加载到canvas中
var image = new Image();
image.src = "path/to/image.jpg";
image.onload = function() {
  // 获取canvas的上下文对象
  var ctx = canvas.getContext("2d");

  // 绘制图片到canvas中
  ctx.drawImage(image, 0, 0);

  // 添加水印文本
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.fillText("版权所有", 10, 30);

  // 将canvas转换为base64格式的图片
  var dataURL = canvas.toDataURL("image/png");

  // 下载图片
  var link = document.createElement("a");
  link.href = dataURL;
  link.download = "image-with-watermark.png";
  link.click();
};

文件转图片

文件转图片也是一种常见的图片处理技术，可以将各种格式的文件转换为图片格式。在 JavaScript 中，可以使用 FileReader API 来实现文件转图片的功能。

代码示例

// 创建一个新的FileReader对象
var reader = new FileReader();

// 读取文件
reader.onload = function() {
  // 将文件内容转换为base64格式的图片
  var dataURL = reader.result;

  // 下载图片
  var link = document.createElement("a");
  link.href = dataURL;
  link.download = "file-to-image.png";
  link.click();
};

// 读取文件
reader.readAsDataURL(file);

图片转文件

图片转文件也是一种常见的图片处理技术，可以将图片格式的文件转换为各种格式的文件。在 JavaScript 中，可以使用 Canvas API 和 Blob API 来实现图片转文件的功能。

代码示例

// 创建一个新的canvas元素
var canvas = document.createElement("canvas");

// 将图片加载到canvas中
var image = new Image();
image.src = "path/to/image.jpg";
image.onload = function() {
  // 获取canvas的上下文对象
  var ctx = canvas.getContext("2d");

  // 绘制图片到canvas中
  ctx.drawImage(image, 0, 0);

  // 将canvas转换为Blob对象
  var blob = canvas.toBlob();

  // 下载文件
  var link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "image-to-file.pdf";
  link.click();
};

html2canvas截屏功能

html2canvas截屏功能是一种可以将网页中的内容转换为图片的工具。在 JavaScript 中，可以使用html2canvas库来实现html2canvas截屏功能。

代码示例

// 将网页中的内容转换为图片
html2canvas(document.body).then(function(canvas) {
  // 将canvas转换为base64格式的图片
  var dataURL = canvas.toDataURL("image/png");

  // 下载图片
  var link = document.createElement("a");
  link.href = dataURL;
  link.download = "html2canvas-screenshot.png";
  link.click();
});