给上传的图片添加水印

本文首发于公众号:水很大
做这个小Demo是因为经常看见社交平台的用户上传的图片是自动添加了水印的。我对这个自动添加水印的功能比较好奇，想探究一下究竟是怎么实现这个功能的。
阅读本文前您需要对canvas有一定的了解。

01 HTML结构

因为是一个简单的Demo,所以HTML只保留最核心的部分，未添加CSS。

  <main>
    <div>
      <form id="upload-img">
        <input type="file" value="上传" id="select-img" name="select-img"  style="display: none" >
        <label for="select-img" class="select-label-img">选择图片</label>
       </form>
    <canvas id="imageCanvas" ></canvas>
    </div>
  </main>
</body>

canvas标签是用来展示添加了文字以后的照片。这里也可以将canvas标签转换成img标签。

02 分析

(1)input标签选择文件后怎样才能知道选择已经结束?
选择文件的过程是:点击按钮，通过弹出的文件选择器选择文件，再点击文件选择器的确认或者取消按钮。当点击确认按钮已经代表文件选择完毕，需要进行下一步的操作。但是问题来了:怎样才能知道用户点击了确认按钮？目前我做不到对这个按钮的监听,所以考虑其他的方法。只能从input标签着手考虑:通过查阅资料得知input标签有一个change事件,只要通过input标签得到的数据发生变化就会触发change事件,所以现在就从change事件入手:

document.getElementById('upload-img').querySelector('input').addEventListener('change',(e)=>{
});

到这里就做到了对用户进行的操作进行监听。
(2)怎样获取上传的文件？
input标签有一个files属性,通过这个属性可以得到上传文件的数据。

this.imgFrom = document.getElementById("select-img");
this.files = this.imgFrom.files[0];

为什么是files[0]?
这是因为只选择了一个文件。this.imgFrom.files是一个FileList对象，因为做这个Demo的时候只上传了一个文件,所以是files[0]。
(3)验证文件类型
因为需要处理的是图片格式的文件,所以像pdf、mp3等格式的文件是不能被上传的，怎么办？
this.imgFrom.files[0]可以得到文件的type属性,通过这个type属性即可判断。

let typeReg = new RegExp('png|jpg|jpeg')
if(typeReg.test(type) == false) {
   //if成立则不是图片
}

(4)怎样读取文件?
到目前为止只是通过input标签得到了文件,但是并没有拿到文件的数据。所以现在要做的就是怎样拿到上传文件的数据。

let reader = new FileReader();
reader.readAsDataURL(this.files);

简单来讲FileReader对象用于将文件转换为二进制字符串,而readAsDataURL则会读取指定的Blob或者File对象(解释来源于MDN)。当读取完成以后会有一个onload事件被触发:

reader.onload = function(e){
}

函数表达式里面的e是一个ProgressEvent。对ProgressEvent只需知道里面存放着上传图片的地址。
(5)图片地址有了,怎样将上传的图片构造出来?

let img = new Image();
reader.onload = function(e){
  img.src = e.target.result;
}

new Image()相当于

document.createElement('img')

(6)给图片添加水印
通常将图片放在canvas上面可能是这样操作的:

let ctx=canvasId.getContext("2d");
ctx.drawImage(img,0,0)

但是现在需要将文字放到图片上面。所以应该先按照上面的方法在画布上绘制图片然后再绘制文字(这个顺序是不能颠倒的)。
怎样绘制文字?

ctx.font = "40px xxx";//xxx为字体,若不设置像素大小可能无效
ctx.fillText("Hello world", 0, 0);

执行上面代码可能在画布中看不见文字,之所以这样是因为在绘制文本时canvas有一个绘制当前文本的基线属性textBaseline。textBaseline默认值为alphabetic。绘制的水印图片如:

Hello world
图片

这就导致在图片上显示不了文字。
为了解决这个问题就要显示的设置textBaseline的值。当文字处于左上、右上时需将textBaseline设置为top。当文字处于左下、右下时需将textBaseline设置为bottom。textBaseline总共可以有六个值可以选择，按照项目的需要选择即可。
(7)水印图片地址获取

canvasId.toDataURL("image/jpeg", 1.0);

03 代码

完整代码请访问公众号:水很大

本文的主要目的是为了记录水印功能的实现,故有些细节问题就没有再记录。