工做积累（一）——使用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 文件，能够在下载后自行修改文件后缀名）。