最近做项目时用到了图片压缩转base64,遇到了一些问题,经过研究学习总结一下。
1.主流用法 通过file插件文件上传,然后获取文件对象进行压缩处理
<input οnchange=
"upload()"
type
=
"file"
accept=
"image/*"
/>
function upload() {
lrz(this.files[
0
])
.
then
(
function
(rst) {
// 处理成功会执行
})
.
catch
(
function
(err) {
// 处理失败会执行
})
.always(
function
() {
// 不管是成功失败,都会执行
});
}
2.有时候没有使用文件上传,但是知道文件存储路径(本地资源链接,存在跨域问题;)
lrz(filePath
)
.
then
(
function
(rst) {
// 处理成功会执行
})
.
catch
(
function
(err) {
// 处理失败会执行
})
.always(
function
() {
// 不管是成功失败,都会执行
});
filePath 为本地资源路径,有跨域问题,如果是跨域资源,我自己总结了两种解决方案
(1) 通过后台对资源进行代理,然后filePath就是调取本地资源链接
代理代码如下:
InputStream inStream = null;
String strUrl = request.getParameter("imgUrl");
try {
URL url = new URL(strUrl);
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");
conn.setRequestMethod("GET");
conn.setConnectTimeout(5 * 1000);
inStream = conn.getInputStream();//通过输入流获取图片数据
OutputStream outStream = response.getOutputStream();
byte[] buffer = new byte[1024];
int len = 0;
while( (len=inStream.read(buffer)) != -1 ){
outStream.write(buffer, 0, len);
}
outStream.flush();
inStream.close();
} catch (Exception e) {
e.printStackTrace();
}finally{
if(null != inStream) {
try{
inStream.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
String strUrl = request.getParameter("imgUrl");
try {
URL url = new URL(strUrl);
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");
conn.setRequestMethod("GET");
conn.setConnectTimeout(5 * 1000);
inStream = conn.getInputStream();//通过输入流获取图片数据
OutputStream outStream = response.getOutputStream();
byte[] buffer = new byte[1024];
int len = 0;
while( (len=inStream.read(buffer)) != -1 ){
outStream.write(buffer, 0, len);
}
outStream.flush();
inStream.close();
} catch (Exception e) {
e.printStackTrace();
}finally{
if(null != inStream) {
try{
inStream.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
(2) 如果为图片,在页面中添加一个img标签,修改该标签的src为资源链接,然后在js中获取标签对象转为base64资源,以后操作详见(3)
document.getElementById("myImg").src = dataURI;
// 把image 转换为base64
function convertImageToBase64() {
var image = document.getElementById("myImg");
// 创建canvas DOM元素,并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐标(0,0) 表示从此处开始绘制,相当于偏移。
canvas.getContext("2d").drawImage(image, 0, 0);
var imgData = canvas.toDataURL();
canvas.remove();
return imageData;
}
// 把image 转换为base64
function convertImageToBase64() {
var image = document.getElementById("myImg");
// 创建canvas DOM元素,并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐标(0,0) 表示从此处开始绘制,相当于偏移。
canvas.getContext("2d").drawImage(image, 0, 0);
var imgData = canvas.toDataURL();
canvas.remove();
return imageData;
}
(3).如果已经获取到base64数据,测试是好用的
lrz(base64数据)
.then(function (rst) {
alert(rst.base64);
// 处理成功会执行
})
.catch(function (err) {
alert(err);
// 处理失败会执行
})
.then(function (rst) {
alert(rst.base64);
// 处理成功会执行
})
.catch(function (err) {
alert(err);
// 处理失败会执行
})
.always(
function
() {
// 不管是成功失败,都会执行
});
仅供学习,如有问题请指正,谢谢!