工做積累（一）——使用canvas實現前臺圖片base64轉碼

利用 HTML5 的 <canvas></canvas> 標籤和 canvasapi ，咱們能夠獲得圖片的 base64 碼，能夠在前臺完成圖片向 base64 的轉碼而不用藉助後臺，下面看一下實現方法。

1.HTML 代碼片斷：

HTML 代碼很是簡單，只須要用到 HTML5 的<canvas></canvas> 標籤便可，指定其 id 方便咱們找到該元素：

<canvas id="load-area"></canvas>

可是須要注意的一點是，須要轉換爲 base64 碼的圖片都須要事先包含在 <img /> 標籤中，同時這麼作能夠爲咱們提供圖片的真實寬度和高度值。爲了避免影響顯示，能夠選擇將其設置爲隱藏：

<img id="convert-img" src="img/demo.png" style="display:none;" />

 

2.JavaScript 代碼片斷：

JavaScript 代碼中咱們用到 canvas api 中的三個方法：getContext(「2d」) 、 drawImage(tmpImage, 0, 0) 、 toDataURL(「p_w_picpath/png」)，咱們不去深究這些方法，只要知道「2d」 指定圖片維度， tmpImage 爲 Image 對象，0, 0 分別爲生成後的圖片距左及距上的像素數便可。來看具體代碼：

$(window).load(function(){
  var loadCanvas = document.getElementById("load-area"),
  context = loadCanvas.getContext("2d"),
  tmpImage = new Image(),
  base64Str = "";
  loadCanvas.width = $('#convert-img').width();
  loadCanvas.width = $('#convert-img').height();
  tmpImage.src = "img/demo.png";
  context.drawImage(tmpImage, 0, 0);
  base64Str = loadCanvas.toDataURL("p_w_picpath/png");
};

至此，變量 base64Str即爲圖片轉換成的 base64 碼。能夠經過 ajax 向直接 POST 給後臺，經過 base64 解碼保存，完成圖片上傳。

補充：

在JavaScript 代碼中咱們用到了 jQuery 中的

$(window).load(function(){});

方法，該方法做用幾乎等同於 JavaScript 中的

window.onload =function() {};

只是前者在同一個頁面中可使用屢次，然後者在同一個頁面中只能使用一次。這裏不使用

$(document).ready(function(){}); //$(function () {});

是由於該方法的時間節點是 DOM 加載完畢，而圖片、音樂等大型文件可能仍爲加載完。若是想要使用，須要將 JavaScript 作以下改造：

$(function() {
  var tmpImage = new Image();
  tmpImage.src = "img/demo.png";
  tmpImage.onload = function() {
    var loadCanvas = $('#load-area').get(0),
    context = loadCanvas.getContext("2d"),
    base64Str = "";
    loadCanvas.height = $('#convert-img').height();
    loadCanvas.width = $('#convert-img').width();
    context.drawImage(tmpImage, 0, 0);
    base64Str = loadCanvas.toDataURL("p_w_picpath/png");
  };
});

 

注：附件爲該 demo 的源代碼，可供參考（原爲 .html 文件，因爲不容許上傳而轉換爲 .txt 文件，能夠在下載後自行修改文件後綴名）。