html 5 图片压缩上传前后端实践

最新推荐文章于 2021-04-07 11:13:46 发布

追云人

最新推荐文章于 2021-04-07 11:13:46 发布

阅读量704

点赞数

本文链接：https://blog.csdn.net/lulei90/article/details/51417669

版权

</pre>前端代码<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.11.1.js"></script>
</head>
<body>
<img src="" id="test" alt="">
<form>
    <input id="fileImg" type="file" name="imagedata"/>

    <button>提交</button>
    <script>
        var formData = new FormData();
        function dataURItoBlob(dataURI) {
            // convert base64 to raw binary data held in a string
            var byteString
                    ,mimestring

            if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
                byteString = atob(dataURI.split(',')[1])
            } else {
                byteString = decodeURI(dataURI.split(',')[1])
            }

            mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

            var content = new Array();
            for (var i = 0; i < byteString.length; i++) {
                content.push(byteString.charCodeAt(i));
            }

            return new Blob([new Uint8Array(content)], {type: mimestring});
        }

        function compress (source_img_obj, quality, output_format){
            var mime_type =output_format || "image/jpeg";
            var cvs = document.createElement('canvas');
            cvs.width = source_img_obj.naturalWidth;
            cvs.height = source_img_obj.naturalHeight;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            var newImageData = cvs.toDataURL(mime_type, quality);
            return newImageData;
        }

        function handleFileSelect (evt) {
            var files = evt.target.files;
            for (var i = 0, f; f = files[i]; i++) {
                if (!f.type.match('image.*')) {
                    continue;
                }
                var reader = new FileReader();
                reader.onload =function(e) {
                    console.log(e)
                    var i = new Image();
                    i.src = e.target.result;
                    var quality = (e.total< 300*1024)? 0.8:0.5;
                    console.log(quality);
                    i.οnlοad=function(){
                        var mime_type=i.src.match(/^data:(image.*);base64,/)[1];
                        console.log(mime_type)
                        document.getElementById('test').src= compress(i,quality,mime_type);
                        i.style.display = "block";
                    }
                };
                console.log(f)
                reader.readAsDataURL(f);
            }
        }
        $('#fileImg').on('change', handleFileSelect);
        $('button').on('click',function(e){
            e.preventDefault();
            if($('#test').attr('src')){
                var blob=dataURItoBlob($('#test').attr('src'));
                formData.append('imagedata',blob);
                $.ajax({
                    type: 'post',
                    url: 'http://localhost:3000/upload',
                    data:formData,
                    processData:false,
                    contentType: false,
                    success: function(data) {
                    }
                })
            }
        });
    </script>
</form>
</body>
</html>

node.js后端

var express=require('express');
var fs=require("fs");
var formidable = require('formidable');
var app=express();
//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
var fileSaveDir = __dirname + '/upload/';
app.post('/upload',function(req,res){
    var form = new formidable.IncomingForm();
    form.uploadDir = fileSaveDir;
    form.type = true;
    form.keepExtensions = true;
    form.parse(req, function(err, fields, files){
        if(!err) {
            var file=files.imagedata;
            console.log(file);
            var type='.'+file.type.split('/')[1];
            fs.rename(file.path, file.path+type, function (error) {
                console.log(error)
            });

        } else {
            console.warn(err);
        }

        res.send(200);
    });
});
app.listen(3000, function () {
    console.log("开始监听");
});

追云人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 5 图片压缩上传前后端实践

前端代码提交 var formData = new FormData(); function dataURItoBlob(dataURI) { // convert base64 to raw binary data held in a string
复制链接

扫一扫