利用 HTML5 的 標(biāo)簽和 canvasapi ，我們可以得到圖片的 base64 碼，可以在前臺(tái)完成圖片向 base64 的轉(zhuǎn)碼而不用借助后臺(tái)，下面看一下實(shí)現(xiàn)方法。

專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)祥符免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過(guò)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1.HTML代碼片段：

HTML 代碼非常簡(jiǎn)單，只需要用到 HTML5 的 標(biāo)簽即可，指定其 id 方便我們找到該元素：

但是需要注意的一點(diǎn)是，需要轉(zhuǎn)換為 base64 碼的圖片都需要事先包含在 標(biāo)簽中，同時(shí)這么做可以為我們提供圖片的真實(shí)寬度和高度值。為了不影響顯示，可以選擇將其設(shè)置為隱藏：

2.JavaScript代碼片段：

JavaScript 代碼中我們用到 canvas api 中的三個(gè)方法：getContext(“2d”) 、 drawImage(tmpImage, 0, 0) 、 toDataURL(“p_w_picpath/png”)，我們不去深究這些方法，只要知道“2d” 指定圖片維度， tmpImage 為 Image 對(duì)象，0, 0 分別為生成后的圖片距左及距上的像素?cái)?shù)即可。來(lái)看具體代碼：

$(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即為圖片轉(zhuǎn)換成的 base64 碼?？梢酝ㄟ^(guò) ajax 向直接 POST 給后臺(tái)，通過(guò) base64 解碼保存，完成圖片上傳。

補(bǔ)充：

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

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

方法，該方法作用幾乎等同于 JavaScript 中的

window.onload =function() {};

只是前者在同一個(gè)頁(yè)面中可以使用多次，而后者在同一個(gè)頁(yè)面中只能使用一次。這里不使用

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

是因?yàn)樵摲椒ǖ臅r(shí)間節(jié)點(diǎn)是 DOM 加載完畢，而圖片、音樂(lè)等大型文件可能仍為加載完。如果想要使用，需要將 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 文件，由于不允許上傳而轉(zhuǎn)換為 .txt 文件，可以在下載后自行修改文件后綴名）。