localResizeIMG lrz压缩文件

最近做项目时用到了图片压缩转base64,遇到了一些问题,经过研究学习总结一下。

1.主流用法 通过file插件文件上传,然后获取文件对象进行压缩处理

"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();
}
}
}

(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;
    }  

(3).如果已经获取到base64数据,测试是好用的

lrz(base64数据)
        .then(function (rst) {
            alert(rst.base64);
            // 处理成功会执行
        })
        .catch(function (err) {
        alert(err);
            // 处理失败会执行
        })
.always( function () {
// 不管是成功失败,都会执行
});


仅供学习,如有问题请指正,谢谢!


你可能感兴趣的:(前端,js,插件)