H5 使用 canvas 压缩并上传文件到Web服务器

这几天要搞图片上传到服务器,折腾了好久终究是搞定了,现在分享给大家,也顺便记录下,毕竟不是做前端的....

html

<html>
<body>
<div>
	<img type="file" id = "file_prv" src ="">
	<input type="file" id="file_upload" name="fileUpload" onchang="prvImage("file_prv", this)">
</div>
</body></html>

js 展示选择的图片到网页上

function prvImage (preImageId, imageFile) {
            
            var $imge = new Image();
            var $path;
            if (document.all)//IE
            {
                // files.select();
                $path = document.selection.createRange().text;
            }
            else//FF
            {
                $path = URL.createObjectURL(imageFile.files[0]);
            }
            $imge.src = $path;
            $imge.onload = function () {
                //生成压缩比例
                var width = $imge.width,
                    height = $imge.height,
                    scale = width / height;
                width = parseInt(800);
                height = parseInt(width / scale);

                //生成canvas
                var $canvas = document.createElement("canvas");
                var ctx = $canvas.getContext('2d');
                $canvas.setAttribute("width", width);
                $canvas.setAttribute("height", height);
                ctx.drawImage($imge, 0, 0, width, height);
                //将图像输出为base64压缩的字符串  默认为image/png
                var $dataUrl = $canvas.toDataURL('image/jpeg', 0.5);

                //获取上传服务端的数据
                var $base64 = $dataUrl.split(",")[1];

                //上传服务器
                UploadImage($base64);
            };
            $('#' + preImageId).attr('src', $path);//图片展示
        }

//上传服务器

function UploadImage: (base64) {
 
            $.ajax({
                url: "/admin/driver/apply/upload",
                type: "POST",
                async: false,
                data: {"base64": base64},
                dataType: 'json',
                success: function (result) {
                    //console.log(typeof result);
                    //console.log(result);
                    if (result.success) {
                        console.log('上传照片成功');
                    } else {
                        $.toastr.error("上传图片失败!");
                    }
                },
                error: function (e) {
                    console.log(e);
                    $.toastr.error("访问失败:" + e.statusText);
                }
            })
        }
//后台就收数据的接口

@RequestMapping("/upload")
    @ResponseBody
    public ResponseBean uploadImage(
            @RequestParam String base64) {

        String imagePath = "";
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            //转码得到图片数据
            byte[] b = decoder.decodeBuffer(base64);

            //上传图片到服务器
            imagePath = FileUtils.uploadImages(b, mobile
                    , Sysutils.getConfig("dri.folder.name"));
            if (StringUtil.isEmpty(imagePath)) {
                return ResponseBean.createError("图片上传失败");
            }
        } catch (IOException e) {
            LOGGER.error("image upload error: ", e.getMessage());
        }

        return ResponseBean.createSuccess("上传图片成功","/"+ mobile + imagePath);
    }

//写入到存储介质的工具方法
public static String uploadImages(byte[] data, String userId,
                                      String folderName) {
        // 对象文件名
        String targetFileName = String.valueOf(new Date().getTime());

        // 建立原图上传目录
        String filePath = File.separator + userId + File.separator + folderName
                + File.separator;

        // 如果该用户已上传过图片,删除对应图片
        //deleteFile(new File(Constants.FILE_UPLOAD_PATH + filePath));

        String dirPath = "文件存放在硬盘的路径" + filePath + FOLDER_FULL
                + File.separator;
        File dirFile = new File(dirPath);
        if (!dirFile.exists()) {
            dirFile.mkdirs();
        }

        // 上传文件名
        SimpleDateFormat dateFmt = new SimpleDateFormat("yyyyMMdd");
        // 文件格式,缩略图生成
        String fileName = dateFmt.format(new Date())
                + UUID.randomUUID()+ ".jpg";
        try {
            dirPath += fileName;
            // 文件流写到服务器端
            FileOutputStream outputStream = new FileOutputStream(dirPath);
            // 写入数据
            outputStream.write(data);
            // 关闭输出流
            outputStream.close();
        }
        catch (IOException e) {
            log.debug("文件上传服务器失败:" + e.getMessage());
            return null;
        }

        // 生成缩略图
        try {
            File uploadImage = new File(dirPath);

            String thumPath =  "文件存放在硬盘的路径" + filePath + FOLDER_THUM
                    + File.separator;

            dirFile = new File(thumPath);
            if (!dirFile.exists()) {
                dirFile.mkdirs();
            }

            thumPath += fileName;
            File thumImage = new File(thumPath);

            // 生成[200x200]的缩略图
            createZoomImage(uploadImage, thumImage, 200, 200);
        }
        catch (IOException e) {
            log.debug("缩略图生成失败:" + e.getMessage());
            return null;
        }

        return "/"+folderName+"/"+FOLDER_FULL+"/"+fileName;
    }


致辞,整个图片文件上传到服务器的步骤就差不多这样了,里面上传文件的路径还得自己根据自己的情况去配置,坑还是比较多的,但是只要用心去做,都能走通 的得意


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值