工作积累(一)——使用canvas实现前台图片base64转

利用 HTML5 的 标签和 canvasapi ,我们可以得到图片的 base64 码,可以在前台完成图片向 base64 的转码而不用借助后台,下面看一下实现方法。

专注于为中小企业提供网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业祥符免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

1.HTML代码片段:

HTML 代码非常简单,只需要用到 HTML5 的 标签即可,指定其 id 方便我们找到该元素:

但是需要注意的一点是,需要转换为 base64 码的图片都需要事先包含在 标签中,同时这么做可以为我们提供图片的真实宽度和高度值。为了不影响显示,可以选择将其设置为隐藏:

 

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 文件,可以在下载后自行修改文件后缀名)。

附件:http://down.51cto.com/data/2365621

新闻名称:工作积累(一)——使用canvas实现前台图片base64转
链接分享:http://scyanting.com/article/goshes.html