使用Webuploader和图片Base64特性完成IE8及其它浏览器的头像上传

最新推荐文章于 2021-03-19 06:13:13 发布

weixin_33809981

最新推荐文章于 2021-03-19 06:13:13 发布

阅读量505

点赞数

文章标签： python javascript java ViewUI

原文链接：https://my.oschina.net/sannychan/blog/465773

版权

2019独角兽企业重金招聘Python工程师标准>>>

#获取BASE64 利用Webuploader获取所选图片的文件大小，如果图片过大设定一个压缩比例，然后利用API：makeThumb生成缩略图，并获取第一次缩略图的BASE64编码，并讲该编码放置为页面一个隐藏div的html代码，利用js的Image对象获取图片的原始尺寸

   uploader.makeThumb(file, function (error, src) {
     if (error) {
         $('#headerImage').html("图片加载失败，请重新选择！");
         return;
     }
     $('#id_img_file_type').val(file.ext);
     var img = new Image();
     img.onload = function () {
         var width = img.width;
         var height = img.height;
         $('#id_img_src').html(src);
         var showImgSize = cacluateShowImgSize(width, height);
         showHeaderImg(showImgSize, file);
     };
     img.src = src;
 }, compressPercent, compressPercent);

#利于jquery插件imgAreaSelect进行裁剪利用<i mg src="base64编码"/>将图片展示在页面上，然后进行相应的裁剪动作； #保存图片提交base64编码、裁剪的四个定位数据，在后台生成图片并进行相应的裁剪，即可生成相应的头像图片。 #遇到的坑

ie8页面img的src如果为base64编码，最大只支持32KB的数据，所以可能js中要进行二次压缩，如果第一次压缩过剧，会影响头像最后的显示效果。这就是开始时base64编码过大在页面产生的效果：
java转base64编码为图片，需要去掉编码前面的头数据，形如：“data:image/jpeg;base64,”，否则图片会转化失败。

public static File base64ToImage(String fileBasePath, String base64src, String fileType) {// 对字节数组字符串进行Base64解码并生成图片
        if (base64src.indexOf(",") > 0) {
            base64src = base64src.substring(base64src.indexOf(",") + 1);
        }
        String fileDir = fileBasePath + File.separator + "temp";
        File targetDir = new File(fileDir);
        if (!targetDir.exists()) {
            targetDir.mkdirs();
        }
        File targetFile = new File(fileDir + File.separator + UUID.randomUUID().toString() + "." + fileType);
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            byte[] bytes = decoder.decodeBuffer(base64src);
            for (int i = 0; i < bytes.length; ++i) {
                if (bytes[i] < 0) {// 调整异常数据
                    bytes[i] += 256;
                }
            }
            OutputStream out = new FileOutputStream(targetFile);
            out.write(bytes);
            out.flush();
            out.close();
            return targetFile;
        } catch (Exception e) {
            logger.error("base64转图片失败", e);
            return null;
        }
    }

转载于:https://my.oschina.net/sannychan/blog/465773