js初級應用之canvas製做圖片水印

時間 2019-11-06

原文原文鏈接

在canvas出現以前，項目中的圖片添加水印的需求，一定是後端同窗們來處理的，可是canvas出來以後，前端終於能夠站出來講，這個需求，交給我來！壯哉我大前端~，上週的任務就是在前端處理水印的效果，這個效果最重要的邏輯其實就幾行代碼，至於如何優雅的將這些簡單的邏輯封裝成方法併入公司的前端庫，應該是一個仁者見仁智者見智的問題，在此不表。html

好了，廢話不表，開始幹活。前端

在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對象仍是空的。ajax

在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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。