当前位置:   article > 正文

Canvas 图片上传,JAVA后端使用 MultipartFile 接收_html2canvas blob传到后台,java后端如何接收

html2canvas blob传到后台,java后端如何接收

关键点:MultipartFile 如果需要使用 originalFileName 的扩展名来在服务器端生成文件,那么需要在前端 fromData() 使用三个入参的append方法

var form=new FormData();
form.append("file",result,"aa.png");

(感谢提供的基础框架 使用canvas上传图片+上传进度_邦杠的博客-CSDN博客

<html>
<head>
    <title>Canvas 文件上传</title>
</head>
<body>
<input type="file" id="myfile"/>
<canvas id="myCanvas" width="200" height="250" style="border:1px solid #d3d3d3;">

</canvas>
<button οnclick="test()">提交</button>

<img src="http://XXX/download?name=cae7319987cb486dacd1dc402f0d802d.png" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    //选择图片后
    myfile.οnchange=function () {
        createURLImg(myfile.files[0]);
    }
    var pen=myCanvas.getContext("2d");
    //加载入canvas
    function createURLImg(file,callback) {
        var imgUrl=URL.createObjectURL(file);
        var image=new Image();
        image.src=imgUrl;
        image.οnlοad=function (ev) {
            pen.drawImage(image,0,0,200,250);
            if(callback) callback();
            URL.revokeObjectURL(imgUrl);
        }
    }
    //提交按钮
    function test() {
        myCanvas.toBlob(function (result) {
            var form=new FormData();
            form.append("file",result,"aa.png");
            ajax(form);
        })
    }
    
    function biafenb(r) {
        if(!pen) pen=myCanvas.getContext("2d");
        pen.save();
        pen.globalAlpha=0.3;
        pen.fillRect(0,(1-r)*200,200,250);
        pen.globalAlpha=1;
        pen.fillStyle = "white";
        pen.font = "20px 微软雅黑";
        pen.textAlign='center';
        pen.fillText(Math.round(r*100)+"%",100,100);
        pen.restore();
    }

    function ajax(formData) {
        $.ajax({
            url:"http://XXX/upload",
            type:"post",
            Accept:"html/text;chatset=utf-8",
            contentType:false,
            data:formData,
            processData:false,
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                myXhr.upload.οnprοgress=function (ev) {
                    pen.clearRect(0,0,200,250);
                    createURLImg(myfile.files[0],function () {
                        biafenb(ev.loaded/ev.total);
                    })
                }
                return myXhr;
            }, success: function (data) {
                console.log("上传成功!!!!");
            }, error: function () {
                console.log("上传失败!");
            }
        })
    }
</script>
</body>
</html>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/923891
推荐阅读
相关标签
  

闽ICP备14008679号