通过web前端实现水印制作

最新推荐文章于 2024-05-21 09:30:00 发布

免费的东西

最新推荐文章于 2024-05-21 09:30:00 发布

阅读量599

点赞数

分类专栏：前端 html 文章标签：小程序前端 vue.js

本文链接：https://blog.csdn.net/m0_67394360/article/details/123324394

版权

快速使用

用 idea 打开 first.html，也就是起一个前端项目，直接打开会报跨域错误。

打开后，选择自己想查看的图片。这里以第二张图片甘雨为例，打开后会到达二级页面，二级页面包括了四张图片：

这四张图片以此表示了：原图、带明水印的图、数字水印、带暗水印的图。

点击最后一张图，会解析出明水印。

二级界面文件夹下，有各个 html文件，一个css文件，一个 js 文件。

每个 html中都会链接到 css和 js 文件,html 中原本都只有一个 img 标签。css 文件没什么，就是规约了图片的大小。重点在 js 文件中。

waterMark.js 中的主体部分规定了两个全局变量，并执行了 run 方法。

var darkCanvas;
var created=0;
run();

接下来请看 run 方法。

async function run() {
    const url = document.getElementsByClassName("img")[0].src;
    const img = document.createElement("img");
    img.src =

关注