npm包 image-ghost-canvas 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，处理图像是一个非常常见的任务。而image-ghost-canvas是一个非常方便的npm包，它提供了一种简单的方法可以在浏览器端对图像进行编辑并生成新的图像。其主要功能包括修改图像大小、剪切、旋转、缩放、添加水印、调整亮度、对比度、饱和度、色调和透明度等等。本文就是要介绍如何使用这个npm包进行图像编辑。

下载

在使用image-ghost-canvas前，需要先安装它。在命令行中输入如下命令：

npm install image-ghost-canvas

开始使用

使用image-ghost-canvas进行图像编辑的步骤如下：

引入模块

在文档的<head>中引入image-ghost-canvas的css和js文件：

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/image-ghost-canvas.min.css">
  <script src="js/image-ghost-canvas.min.js"></script>
</head>

添加需要编辑的图像

在文档中添加<img>元素，其src属性指向需要编辑的图像：

<body>
  <img id="orgImg" src="./images/myImg.jpg">
</body>

创建ImageGCO对象

在js代码中创建ImageGCO对象，并传入需要编辑的图像元素ID：

var myImg = new Image();
myImg.src = "./images/myImg.jpg";
 
myImg.onload = function() {
  var igc = new ImageGCO("orgImg", { image: myImg });
}

编辑图像

使用ImageGCO的方法可以对图像进行编辑。如下是一个调整亮度的例子：

igc.brightness(0.5);

除了此之外，ImageGCO还提供了许多其他的方法，可以使用它们进行剪切、旋转、缩放、添加水印等等操作。接下来的部分，将会对这些方法进行详细介绍。

方法

resize

这个方法可以用来改变图像的尺寸。它有两个参数：width，height。新的图像将在画布上重绘，并且在其中定位。

  igc.resize(500, 500);

cut

这个方法进行矩形裁剪。它有四个参数：x，y，width，height，分别代表左上角坐标和区域的宽度和高度。新的图像将在画布上重绘，并且在其中定位。

  igc.cut(150, 150, 200, 200);

rotate

这个方法将图像通过给定的角度旋转。它有两个参数：angle，cx/cy。angle属性是一个角度，表示要旋转的角度。cx/cy表示旋转中心点的坐标。

  igc.rotate(90, 0, 0);

flip

这个方法将图像按水平或垂直方向翻转。可以使用"horizontal"或"vertical"作为参数。

  igc.flip('horizontal');

scale

这个方法将图像缩放到给定的比例。它有两个参数：sx，sy，分别代表x方向和y方向的比例。

  igc.scale(2, 2);

watermark

这个方法在图像上添加水印。它有四个参数：image，x，y，opacity，分别表示要添加的图像元素，水印的位置和水印的不透明度。

  var myLogo = new Image();
  myLogo.src = "./images/logo.png";
  myLogo.onload = function() {
    var posX = igc.getWidth() - myLogo.width - 20;
    var posY = igc.getHeight() - myLogo.height - 20;
    igc.watermark(myLogo, posX, posY, 0.5);
  }

brightness

这个方法可以调整图像的亮度。它有一个参数value，表示要调整的值。

  igc.brightness(0.5);

contrast

这个方法可以调整图像的对比度。它有一个参数value，表示要调整的值。

  igc.contrast(1.5);

saturation

这个方法可以调整图像的饱和度。它有一个参数value，表示要调整的值。

  igc.saturation(1.5);

hue

这个方法可以调整图像的色调。它有一个参数value，表示要调整的值。

  igc.hue(90);

opacity

这个方法可以调整图像的透明度。它有一个参数value，表示要调整的值。

  igc.opacity(0.5);

注意：以上的调整值都是相对于原始值的增加或减少。比如亮度调整值从-1到1，0表示没有变化，-1表示暗黑，1表示亮白。同理，对比度调整值从0到1。

结束语

通过本文的介绍，您应该已经了解如何使用image-ghost-canvas对图像进行编辑了。当然，ImageGCO提供的方法并不只限于上述几个，您还可以深入学习它，自由探索它所提供的各种图像编辑功能，丰富您的前端开发技巧。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f93238a385564ab703f