JS将图片转换成Base64编码

本文介绍了在移动端开发中如何利用JavaScript将图片转换为Base64编码,以减少HTTP请求并优化与服务端的数据交互。通过在页面上创建canvas元素,将图片重绘到canvas上,然后获取其数据URL,从而得到Base64字符串,最终将该字符串上传至服务器进行解码处理。

在移动端与服务端的交互过程中,经常会遇见移动端上传图片到服务端的情况;将图片转成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字符串上传到服务器,服务端得到之后将其解码,即可得到上传的图片;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值