工作积累（一）——使用canvas实现前台图片base64转-创新互联

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

为密山等地区用户提供了全套网页设计制作服务，及密山网站建设行业解决方案。主营业务为网站设计制作、网站设计、密山网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

1.HTML代码片段：

HTML 代码非常简单，只需要用到 HTML5 的<canvas></canvas> 标签即可，指定其 id 方便我们找到该元素：

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

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站标题：工作积累（一）——使用canvas实现前台图片base64转-创新互联
URL链接：https://www.cdcxhl.com/article40/pjeho.html

成都网站建设公司_创新互联，为您提供网页设计公司、定制开发、静态网站、ChatGPT、搜索引擎优化、App设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容