--- highlight: vs2015 theme: juejin --- ## 1、用canvas实现图片添加水印 ### 方法注解： - **`getContext`**：返回一个用于在画布上绘图的环境。 > 语法：**Canvas.getContext(contextID)** > > 参数：*contextID* 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。 - **`drawImage`**：在画布上绘制图像、画布或视频。也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。 > 语法1：**context.drawImage(img,x,y)**————在画布上定位图像 > > 语法2：**context.drawImage(img,x,y,width,height)**————在画布上定位图像，并规定图像的宽度和高度 > > 语法3：**context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)**————剪切图像，并在画布上定位被剪切的部分 > > 参数值： > 参数 | 描述 | > | --------- | ---------------------- | > | *img* | 规定要使用的图像、画布或视频。 | > | *sx* | 可选。开始剪切的 x 坐标位置。 | > | *sy* | 可选。开始剪切的 y 坐标位置。 | > | *swidth* | 可选。被剪切图像的宽度。 | > | *sheight* | 可选。被剪切图像的高度。 | > | *x* | 在画布上放置图像的 x 坐标位置。 | > | *y* | 在画布上放置图像的 y 坐标位置。 | > | *width* | 可选。要使用的图像的宽度。（伸展或缩小图像） | > | *height* | 可选。要使用的图像的高度。（伸展或缩小图像） - **`fillText`**：在画布上绘制填色的文本。文本的默认颜色是黑色。 > 语法：**context.fillText(text,x,y,maxWidth)** > > 参数值： > > | 参数 | 描述 | > | ---------- | ---------------------- | > | *text* | 规定在画布上输出的文本。 | > | *x* | 开始绘制文本的 x 坐标位置（相对于画布）。 | > | *y* | 开始绘制文本的 y 坐标位置（相对于画布）。 | > | *maxWidth* | 可选。允许的最大文本宽度，以像素计。 - **`rotate`**：旋转当前的绘图。 > 语法：**context.rotate(angle)** > > 参数值： > > | 参数 | 描述 | > | ---------- | ---------------------- | > | *angle* | 旋转角度，以弧度计。如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。举例：如需旋转 5 度，可规定下面的公式：5 * Math.PI/180。 | - **`toDataURL`**：返回一个包含图片展示的数据 URI，图像基于`Base64`编码 > 语法：**canvas.toDataURL(type, encoderOptions);** > > 参数值： > > | 参数 | 描述 | > | ---------- | ---------------------- | > | *type* | 可选。图片格式，默认为 image/png。（image/png、image/jpeg、image/webp） | > | *encoderOptions* | 可选。图片质量。在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将使用默认值 0.92。其他参数会被忽略。 | - **`toBlob`**：创造Blob对象，用以展示canvas上的图片 > 语法：**canvas.toBlob(callback, type, encoderOptions)** > > 参数值： > > | 参数 | 描述 | > | ---------- | ---------------------- | > | *callback* | 回调函数，可获得一个单独的Blob对象参数。 | > | *type* | 可选。图片格式，默认为 image/png。（image/png、image/jpeg、image/webp） | > | *encoderOptions* | 可选。图片质量。在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将使用默认值 0.92。其他参数会被忽略。 | ### 具体实现方法 - #### `单独一个水印` ```js ``` 效果： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9893a3d37aa4c53b920ddbecd38f57c~tplv-k3u1fbpfcp-watermark.image) - #### `水印铺满图片` ```js ``` 效果： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecda8c05d4dd4aed927c3ffbe06b44fa~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcf7987b2abf4c668969e43e93f41c5a~tplv-k3u1fbpfcp-watermark.image) ## 2、利用dom-to-image实现图片添加水印 ### 方法注解 - **`encodeURIComponent`**：把字符串作为 URI 组件进行编码。 > 语法：**encodeURIComponent(uri)** > > 参数值： > > | 参数 | 描述 | > | ---------- | ---------------------- | > | *uri* | 必需。一个字符串，含有 URI 组件或其他要编码的文本。| - **`unescape`**：对编码的字符串进行解码。 > 语法：**unescape(string)** > > 参数值： > > | 参数 | 描述 | > | ---------- | ---------------------- | > | *string* | 必需。要解码的字符串。| - **`btoa`**：用于创建一个 base-64 编码的字符串。【base-64 解码使用方法是 [atob()](https://www.runoob.com/jsref/met-win-atob.html) 】。 > 语法：**window.btoa(string)** > > 参数值： > > | 参数 | 描述 | > | ---------- | ---------------------- | > | *string* | 必需，要编码的字符串。| > #### 具体实现方法 ```js ``` 效果： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c20d5229720a4766a6fb30a90d3d1214~tplv-k3u1fbpfcp-watermark.image?)