图片文件转换成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,", "");
}
图片文件转换成Base64编码实现ajax提交图片的更多相关文章
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- js如何将选中图片文件转换成Base64字符串?
如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...
- php 将图片文件转成base64编码的方法
php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...
- Java对网络图片/本地图片转换成Base64编码和解码
一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...
- delphi将图片转换成Base64编码函数
{************************************************************************** 名称: BaseImage 参数: fn: TF ...
- Linux中将一个GBK编码的文件转换成UTF-8编码文件
Linux中将一个GBK编码的文件转换成UTF-8编码文件 使用iconv 命令iconv -f GBK -t UTF-8 file1 -o file2 输出另一个文件,然后再覆盖源文件内容
- WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片
原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...
- 图片转换成Base64编码集成到html文件
首先为什么要这么做? 原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...
- 利用PHP将图片转换成base64编码的实现方法
先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...
随机推荐
- 使用virtualenv的正确姿势
关于virtualenv是什么我想我不用介绍的吧.用python做开发的人要是不会用virtualenv,总有一天会被各种环境恶心死.那么我今天就来讲一讲使用virtualenv的正确姿势. virt ...
- AtomicInteger线程安全的计数器
在多线程环境下计数的时候,++i和i++是不安全的,故而需要加锁机制,也可以使用volatile关键字进行修饰,但是更简单有效的方式是使用Atomic类
- ResNet 残差网络训练数据
https://github.com/tornadomeet/ResNet 图片地址: data/trian/cifar10_cifar10.rec data/train/cifar10_val.re ...
- 3spring:生命周期,属性赋值,自动装配
有不懂的可以参考之前的文章! https://www.cnblogs.com/Mrchengs/p/10109053.html 1.Bean的生命周期 创建---初始化---销毁 容器管理 ...
- jquery分页例子
先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单 就四个字段 分别是News_id ...
- Windows 使用iCloud日历
作者:Lumos Night链接:https://www.zhihu.com/question/34287617/answer/97299386来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...
- [转]MFC子线程更改图像数据后更新主窗口图像显示方法
程序思路是由外部的输入输出控制卡发出采集图像信号,之后相机采集图像得到图像数据指针,接收图像数据指针创建成图像最后显示到MFC对话框应用程序的Picture Control控件上,同时,为了标定相机位 ...
- 关于最新版AFNetworking(3.0)上传多张图片的问题
最新版的AF已经废弃了很多以前的类,所以很多以前的方法都不能用了,当然最主要还是为了适应ipV6所做的更改.楼主最近正在写多张图片上传,碰到了一些问题,解决之后直接封装了一个方法,废话有点多了,上代码 ...
- HDU 1275 两车追及或相遇问题(相遇和追及公式)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1275 两车追及或相遇问题 Time Limit: 2000/1000 MS (Java/Others) ...
- OSMboxPend()
1. 原型:void *OSMboxPend(OS_EVENT *pevent, INT16U timeout, INT8U *err) 2. 参数意义: pevent :消息邮箱 timeout ...