JS将图片转换成Base64编码

来源：互联网发布：linux在线安装sunjdk 编辑：程序博客网时间：2024/04/20 12:46

在移动端与服务端的交互过程中，经常会遇见移动端上传图片到服务端的情况；将图片转成base64字符串然后和服务端交互，可以有效的减少HTTP数据请求，减少与服务端的数据交互；
将图片转换成base64字符串，主要使用的canvas：
①使用canvas必须在界面上创建canvas：

<canvas id="photo" style="display: none;"></canvas>  //创建 canvas 控件

②利用canvas 重绘，将图片文件转换成base64编码字符串

var image = new Image();image.src = s;              //s是图片的路径image.onload = function() { //image.onload是等待图片加载完毕，等待图片加载完毕之后，才能对图片进行操作        var width = image.width;//根据图片的宽高，将图片进行压缩        var height = image.height;        if(width > height) {                height = Math.round(500 * width / height);                width = 500;        } else {                width = Math.round(500 * width / height);                height = 500;        }        var canvas = document.getElementById("photo");        var cax = canvas.getContext('2d');        canvas.width = width;        canvas.height = height;        cax.drawImage(image, 0, 0, width, height);//重绘        var dataUrl = canvas.toDataURL("image/png");//dataUrl 即为base编码字符串}

③转换成功之后，得到的是一个字符长串；data:image/jpg;base64,·······；然后将得到的base64字符串上传到服务器，服务端得到之后将其解码，即可得到上传的图片；

0 0