0
点赞
收藏
分享

微信扫一扫

通过图片地址,将图片处理成base64,使用ajax上传图片


需求

群里的一个小朋友一直要求我帮他实现以下,我就写了一个案例。需求就是,他用canvas生成了一个base64格式的图片,然后需要将这个图片上传到服务器上面去。

代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<img src="xwz.jpg" alt="" id="img">
</body>
<script>
let img = document.querySelector("#img");
img.onload = function () {
//创建formdata对象
var formdata = new FormData();

//获取图片的base64格式
var data = imgSrcToBase64(img);

//将获取的base64格式图片转换为图片文件对象
var imgFile = convertBase64UrlToBlob(data);

//将文件添加到formdata里面
formdata.append("file",imgFile);

$.ajax({
url: "http://localhost:3000/map",
type:"post",
data:formdata,
processData: false, // 不处理数据
contentType: false , // 不设置内容类型
success:function (e) {
console.log(e);
}
});
};

/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){

var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte

//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}

return new Blob( [ab] , {type : 'image/png'});
}

//将图片转为base64格式
function imgSrcToBase64(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0,img.width,img.height);

return canvas.toDataURL();
}
</script>
</html>

由于自己没有base64格式的图片,所以现成将一张图片转成了base64格式。然后再将其转换成二进制的格式,放入到formdata对象内,直接将formdata使用ajax上传。


举报

相关推荐

0 条评论