通過圖片地址，將圖片處理成base64，使用ajax上傳圖片

專注前端30年發表於2017-11-27

需求

群裡的一個小朋友一直要求我幫他實現以下，我就寫了一個案例。需求就是，他用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上傳。

相關文章