Hike News
Hike News

用 Canvas 在圖片加上浮水印

目的

最近整理出了一批用不上的舊物，保留了接近全新以及完全未使用的物品，就在拍照後要修圖時才發現，開繪圖程式再開檔案加字就花了一點時間，又要把相片壓縮、打字、加浮水印 … ，這又要花了不少時間，加上只是為了縮小圖片加字而去開啟繪圖程式，又是要一張一張相片的做太麻煩了，所以就想到用 Canvas ，直接用 <input type="file" > 載入圖後，再用按鍵另存成新的圖檔，就可以快速完成，所以接下來就開始實做。

建立畫板

在 HTML 中建立 Cancas

1
<canvas id="cvs"></canvas>

和載入圖片的按鍵

1
<input type="file" id="loadPic">

要從 input 取得圖片 ，取值方式可參考 MDN 在網頁應用程式中使用本地檔案

要先判斷有沒有資料才向下執行

1
2
3
4
5
function readURL(input) {
  if (input.files && input.files[0]) { 
    // 執行內容
  }
}

當 input.files 有值時，建立 new FileReader() 讀取資料。

再來就等 FileReader 確定有接收到資料後就可以執行載入圖片了。

1
2
3
4
5
var reader = new FileReader();
reader.onload = function (e) {
  // 圖片載入
};
reader.readAsDataURL(input.files[0]);

再來就設定載入後的圖片寬高，這裡我設定的是固定高度是 300 px ，寬是等比例縮放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var img = new Image();
img.onload = function () {
  canvas.height = 450;
  canvas.width = (canvas.height / img.height) * img.width;
  
  // 載入圖片
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  
  ctx.font = "60px monospace"; // 字級 字體
  ctx.textBaseline = "top"; // 文字對齊的基準線
  var textW = ctx.measureText("浮水印").width; // 取得文字的長度
  ctx.fillText(
    "浮水印",
    (canvas.width - textW) / 2,
    (canvas.height - 60) / 2
  ); // 置中
};
img.src = e.target.result;

另存新檔的話就直接使用 a 標籤完成

1
<a href="#" download="另存新檔.jpg" onclick="this.href=canvas.toDataURL();">下載圖片</a>

這樣就完成一個簡單又快速完成有加字和轉存圖片的工具

  • 以下為完整的轉存圖片

    • HTML 元素
    1
    2
    3
    <a href="#" download="販售品.jpg" onclick="this.href=canvas.toDataURL();" >下載圖片</a>
    <input type="file" onchange="readURL(this)" id="loadPic">
    <canvas id="cvs"></canvas>
    • 用 img 標籤檢查 input 是不是有正確取出資料
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <img src="" id="imgload" alt="">
    <script>
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
            $('#blah').attr('src', e.target.result);
          }
          reader.readAsDataURL(input.files[0]);
        }
      }

      $("#imgInp").change(function() {
        readURL(this);
      });
    </script>

  • 參考資料