js初級應用之canvas製作圖片水印
阿新 • • 發佈：2020-10-21
在canvas出現之前，專案中的圖片新增水印的需求，必定是後端同學們來處理的，但是canvas出來之後，前端終於可以站出來說，這個需求，交給我來！壯哉我大前端~，上週的任務就是在前端處理水印的效果，這個效果最重要的邏輯其實就幾行程式碼，至於如何優雅的將這些簡單的邏輯封裝成方法併入公司的前端庫，應該是一個仁者見仁智者見智的問題，在此不表。
好了，廢話不表，開始幹活。
在html中準備canvas環境
<canvas id="myCanvas" width="1000" height="500" > Your browser does not support the HTML5 canvas tag.</canvas>
載入圖片,這張圖片有可能是已經存在的，也有可能是從後端通過ajax取過來的，不管是哪種方式，我們都需要一個img物件來儲存這張圖,在例子中，我們從後臺取過來一張url為./img/demo.jpg的圖片
var img = new Image(); img.src = './img/demo.jpg';
在圖片載入完成之後，呼叫canvas的drawImage(),將我們的圖片繪製在canvas的圖層上面
img.onload=function(){ var canvas=document.getElementById("myCanvas");var ctx=canvas.getContext("2d"); ctx.drawImage(img,0,0); }
注意，呼叫drawImage()函式之前，請確保你的圖片已經載入ok，否則你會看到canvas是空白的，這是因為在圖片還沒有絕對載入到頁面之前，你直接呼叫了drawImage(),而這個時候，img物件還是空的。
在canvas上繪製好圖片之後，回到onload函式中，利用我們在上一步中獲取的ctx物件，繼續繪製水印，font屬性可以自定義水印的大小以及字型，fillStyle()方法可以自定義水印的顏色以及透明度，fillStyle()則完成最後的填充以及水印的位置定位
ctx.font="20px microsoft yahei"; ctx.fillStyle = "rgba(255,255,255,0.5)"; ctx.fillText("my images",100,100);
ok，如果你進行到這一步，初步的水印效果應該以及達成了，如果你還需要更多的效果，那就趕快去看canvas的api吧，上圖，看看我的水印
最後，貼一個原始碼，想看到效果的同學，直接拷貝我的html程式碼，將裡面的圖片url替換成你本地的url，就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
//準備img物件
var img = new Image();
img.src = './img/demo.jpg';
// 載入完成開始繪製
img.onload=function(){
//準備canvas環境
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
// 繪製圖片
ctx.drawImage(img,0,0);
// 繪製水印
ctx.font="20px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);
}
</script>
</body>