通过图片地址，将图片处理成base64，使用ajax上传图片-CFANZ编程社区

需求

群里的一个小朋友一直要求我帮他实现以下，我就写了一个案例。需求就是，他用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上传。