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

2017-11-27 19:10:51来源:CSDN作者:qq_30100043人点击

分享

需求

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

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台