利用 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" />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 文件，可以在下载后自行修改文件后缀名）。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
