JS将图片转换成Base64编码
2017-03-09 15:33
363 查看
在移动端与服务端的交互过程中,经常会遇见移动端上传图片到服务端的情况;将图片转成base64字符串然后和服务端交互,可以有效的减少HTTP数据请求,减少与服务端的数据交互;
将图片转换成base64字符串,主要使用的canvas:
①使用canvas必须在界面上创建canvas:
②利用canvas 重绘,将图片文件转换成base64编码字符串
③转换成功之后,得到的是一个字符长串;data:image/jpg;base64,·······;然后将得到的base64字符串上传到服务器,服务端得到之后将其解码,即可得到上传的图片;
将图片转换成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字符串上传到服务器,服务端得到之后将其解码,即可得到上传的图片;
相关文章推荐
- js 将图片转换为base64编码
- C#返回base64编码给前台js时直接转换为图片
- Base64编码的字符串与图片的转换 C# .
- JS 对图片base64编码字符串进行解码并输出图像
- js 将图片连接转换称base64格式
- javascript将base64编码的图片数据转换为file并提交
- iOS7.0及以上图片转换成base64编码的方法(oc)
- C#Base64编码的字符串与图片的转换
- C# Base64编码的字符串与图片的转换
- js 显示base64编码的二进制流网页图片
- javascript将base64编码的图片数据转换为file并提交
- js 显示base64编码的二进制流网页图片
- js 显示 base64编码 的二进制流 图片
- Base64编码和图片的互相转换
- Base64编码的字符串 与 图片的 转换
- js对图片base64编码字符串进行解码并输出图像示例
- Base64编码的字符串与图片的转换 C#
- Javascript 将图片的绝对路径转换为base64编码
- python将图片文件转换成base64编码的方法