//上传头像图片
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,", "");
}

图片文件转换成Base64编码实现ajax提交图片的更多相关文章

  1. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  2. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  3. php 将图片文件转成base64编码的方法

    php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...

  4. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

  5. delphi将图片转换成Base64编码函数

    {************************************************************************** 名称: BaseImage 参数: fn: TF ...

  6. Linux中将一个GBK编码的文件转换成UTF-8编码文件

    Linux中将一个GBK编码的文件转换成UTF-8编码文件 使用iconv 命令iconv -f GBK -t UTF-8 file1 -o file2 输出另一个文件,然后再覆盖源文件内容

  7. WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片

    原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...

  8. 图片转换成Base64编码集成到html文件

    首先为什么要这么做?  原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...

  9. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

随机推荐

  1. SOJ 1002/1003/1004 大整数相加/相乘/相除

    三个题目分别考察大整数相加相乘相除运算.如果按照传统算法是取一个长数组,之后进行模拟或者FFT来进行运算.但是相对繁琐. 后来昨天的青岛区域赛网赛1001,用到了JAVA的BigDecimal,于是反 ...

  2. JDBC(1)简单介绍/数据库的连接

    初识JDBC: JDBC是java连接数据库的一个工具,没有这个工具,java将无法和数据库进行连接. JDBC API: JDBC是个“低级”接口,也就是说,他直接用于调用SQL命令. JDBC驱动 ...

  3. MyBatis(2)增删改查

    本次全部学习内容:MyBatisLearning   查: 根据id查询用户信息,得到一个用户信息   在User.xml文件中添加代码: <mapper namespace="tes ...

  4. 关于接口返回BOM头处理的问题

    今天用RestClient框架做接口请求.结果请求回来的json转模型失败.提示JSON格式不正确.到BeJson网站验证一下,发现果然不对. 后来得知是由于json信息带着bom头导致的,这个该死的 ...

  5. 清空oracle session

    select 'alter system kill session '''||sid|| ','||serial#||''';' from v$session where username =' ';

  6. TensorFlow创建简单的图片分类系统--机器学习

    TensorFlow 参考链接 http://www.wolfib.com/Image-Recognition-Intro-Part-1/ 环境要求 linux amd64(必须是64位处理器)pyt ...

  7. spring加载属性(properties)文件

    一.注解方式加载 jdbc.driver=org.mariadb.jdbc.Driver jdbc.url=jdbc:mariadb://localhost:3306/kt jdbc.user=roo ...

  8. java根据数据库自动生成代码

    出现这个已经创建成功 出现这个情况,没有使用DBUtil,引入即可 已经创建完成 代码下载:https://github.com/weibanggang/tool 项目实例下载:https://pan ...

  9. Tuple和 ValueTuple

    这个类型还是学习C#7.0的语法在看到的,这边单独拿来学习下. 学习地址: https://docs.microsoft.com/zh-cn/dotnet/csharp/tuples https:// ...

  10. iOS开发学习资源

    最近想写点关于iOS开发的总结和心得.虽然网上资源一大堆,质量参差不齐,还是推荐一点干货吧! https://www.objc.io/issues/  这个网站的文章质量很高,很多干货,可惜今年已经停 ...