zoukankan      html  css  js  c++  java
  • 图片文件转换成Base64编码实现ajax提交图片

                    //上传头像图片 
            function uploadHead(imgPath) {
                console.log("imgPath = " + imgPath);
                var image = new Image();
                image.onload = function() {
                    var imgData = getBase64Image(image);
                    /*在这里调用上传接口*/
                    mui.ajax($serverPath + "app/modifyHead", {
                        data: {
                            'imgData': imgData,
                            'userId': plus.storage.getItem("userId")
                        },
                        dataType: 'json',
                        type: 'post',
                        timeout: 10000,
                        success: function(data) {
                            if(data.result == 'yes') {
                                $newHead = data.newHeadPath;
                                console.log('上传成功!!!!!!!!!!' + $newHead);
                                plus.storage.setItem("userHead", $newHead);
                                mui.toast("头像修改成功!");
                            } else {
                                mui.toast("头像上传失败!");
                            }
                        },
                        error: function(xhr, type, errorThrown) {
                            mui.toast('网络异常,请稍后再试!');
                        }
                    });
                }
                image.src = imgPath;
                image.style.width = "60px";
                image.style.height = "60px";
                console.log("haha");
            }
            //将图片压缩转成base64 
            function getBase64Image(img) {
                var canvas = document.createElement("canvas");
                var width = img.width;
                var height = img.height;
                // calculate the width and height, constraining the proportions 
                if(width > height) {
                    if(width > 100) {
                        height = Math.round(height *= 100 / width);
                        width = 100;
                    }
                } else {
                    if(height > 100) {
                        width = Math.round(width *= 100 / height);
                        height = 100;
                    }
                }
                canvas.width = width; /*设置新的图片的宽度*/
                canvas.height = height; /*设置新的图片的长度*/
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, width, height); /*绘图*/
                var dataURL = canvas.toDataURL("image/png", 0.8);
                return dataURL.replace("data:image/png;base64,", "");
            }
  • 相关阅读:
    BZOJ1033:[ZJOI2008]杀蚂蚁antbuster(模拟)
    BZOJ4001:[TJOI2015]概率论(卡特兰数,概率期望)
    BZOJ1820:[JSOI2010]Express Service 快递服务(DP)
    BZOJ4066:简单题(K-D Tree)
    2110. [NOIP2015普及]金币
    73. 找最佳通路
    cogs 7. 通信线路
    codevs 3295 落单的数
    151. [USACO Dec07] 建造路径
    必备算法之二叉树的相关操作
  • 原文地址:https://www.cnblogs.com/ihuangjianxin/p/9402691.html
Copyright © 2011-2022 走看看