使用canvas上传图片+上传进度

实现效果:

速度过快，调式浏览器方式:F12

后台java代码

public String imageshangchuan(@RequestPart("xxx") MultipartFile multipartFile, Model model, HttpServletRequest request) {if (!multipartFile.getContentType().contains("image/")) {model.addAttribute("err", "只能是图片文件！");return "/inputfile";}if (multipartFile.getSize() > 1024 * 1024 * 5) {model.addAttribute("err", "只能是5M以下！");return "/inputfile";}//取得相对路径String basePath = request.getServletContext().getRealPath("/img");File files = new File(basePath);if(!files.exists()){files.mkdir();}String rekativePath;try {rekativePath = makeImagePath(basePath, multipartFile.getOriginalFilename());File file = new File(rekativePath);file.getParentFile().mkdir();multipartFile.transferTo(file);} catch (IOException e) {model.addAttribute("err", "上传失败，请重试");return "/inputfile";}return "/index";}public String makeImagePath (String basePath, String fileName){Date date = new Date();//String[] filename = simpleFile(fileName);return String.format("%s%s%s%supload_%s_%s.%s",basePath,File.separator,new SimpleDateFormat("yyyyMMdd").format(date),File.separator,"11",new SimpleDateFormat("hhmmss").format(date),"jpg");}public String[] simpleFile (String file){int sum = file.lastIndexOf(".");return new String[]{file.substring(0, sum),file.substring(sum + 1)};}

View Code

方法一：canvas实现

<html>
<head><title>Title</title>
</head>
<body>
<input type="file" id="myfile"/>
<canvas id="myCanvas" width="200" height="250" style="border:1px solid #d3d3d3;"></canvas>
<button onclick="test()">提交</button>
<script src="css/jquery-1.11.3.js"></script>
<script>//选择图片后
    myfile.onchange=function () {createURLImg(myfile.files[0]);}var pen=myCanvas.getContext("2d");//加载入canvasfunction createURLImg(file,callback) {var imgUrl=URL.createObjectURL(file);var image=new Image();image.src=imgUrl;image.onload=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("xxx",result);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:"/bbbbb",type:"post",Accept:"html/text;chatset=utf-8",contentType:false,data:formData,processData:false,xhr: function () {var myXhr = $.ajaxSettings.xhr();myXhr.upload.onprogress=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>

View Code

方法二：img+canvas实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas + ajax</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><style>#myimg {border: 3px solid gray;border-radius: 5px;position: absolute;top: 0;left: 0;}#mymask {position: absolute;top: 0;left: 0;}</style>
</head>
<body><div class="container"><div style="margin-top: 2em;"><input type="file" id="myfile" style="display: none"> <!-- 选择文件后，要预览 --><button class="btn btn-primary" onclick="myfile.click()">选择图片</button><button class="btn btn-primary" onclick="clickMe()">上传图片</button></div><div style="position: relative"><img src="" id="myimg" title="暂时没有上传" width="200" height="200"/><canvas id="mymask" width="200" height="200">不支持canvas</canvas></div>
</div><script>var ctx;myfile.onchange = () => { // 预览图片var imgUrl = URL.createObjectURL(event.target.files[0]);myimg.src = imgUrl;myimg.onload = () => URL.revokeObjectURL(imgUrl);};function clickMe() {compressImgWithCanvas(myfile.files[0], uploadWithAJAX);}/*** 压缩图片，然后执行某些任务*/function compressImgWithCanvas(blob, taskCallback) {var rat = 2;var w = myimg.naturalWidth / rat, h = myimg.naturalHeight / rat;var canvas = document.createElement("canvas");canvas.width = w;canvas.height = h;var ctx = canvas.getContext('2d');ctx.drawImage(myimg, 0, 0, w, h);ctx.fillText("nf147", w - 20, h - 20);canvas.toBlob(taskCallback, "image/jpeg");}/*** 更新预览进度*/function refreshProgress(r) {if (!ctx) ctx = mymask.getContext('2d');ctx.save();ctx.clearRect(0, 0, 200, 200);ctx.globalAlpha = 0.6;ctx.fillRect(0, (1 - r) * 200, 200, 200);ctx.globalAlpha = 1;ctx.fillStyle = "white";ctx.font = "20px 微软雅黑";ctx.fillText(r * 100 + '%', 80, 180);ctx.restore();}/*** 通过 AJAX 上传 blob 类型的文件* @param blob*/function uploadWithAJAX(blob) {var fd = new FormData();fd.append("xxx", blob);$.ajax({method: 'post',url: "/bbbbb",cache: false,contentType: false,data: fd,processData: false,xhr: () => {var xhr = $.ajaxSettings.xhr();xhr.upload.onprogress = (ev) => {refreshProgress(ev.loaded / ev.total);};return xhr;}}).done(console.log).fail((xhr, staus, err) => console.error(xhr, staus, err));}</script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"crossorigin="anonymous"></script>
</body>
</html>

View Code

posted @ 2018-11-11 16:38 韦邦杠阅读(...) 评论(...) 编辑收藏

使用canvas上传图片+上传进度相关推荐

canvas使用Ajax上传图片PHP,使用ajax上传图片，并且使用canvas实现出上传进度效果...
前端代码: 使用ajax上传图片,并使用canvas实现出上传进度效果 #myImg { border: 1px solid gray; border-radius: 8px; position: a ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
el-upload使用自定义上传，获取上传进度和上传成功回调
项目场景: 在后台管理系统上传图片时,使用自定义的上传方法问题描述用element-ui + vue2.0上传多张图片,并使用自定义方法时,无法获取上传进度和上传完成后的图片列表,想要获取上传完成 ...
vue获取上传进度_vue，webuploader实现文件分片上传，并显示上传进度
1.效果图 2.上传文件时,如果使用普通上传,则需要上传一个文件完成后才能上传下一个文件,如果文件很大时,可能会造成浏览器无响应,如果采用分片上传方式,将一个大文件分割成多块,并发上传,极大地提高大文 ...
Asp无组件上传进度条解决方案
http://webuc.net/dotey/archive/2004/07/22/1334.aspx 我还是一点一点用一个实例来说明的吧,客户端HTML如下.要浏览上传附件,我们通过<inpu ...
antd 上传进度_antd vue upload组件使用customRequest上传文件显示文件上传进度
antd-vue上传文件upload组件使用自定义上传方法customRequest无法显示文件上传进度条,如下图红框内的进度条无法显示当前文件上传进度于是,在网上搜索解决方案: 第一种解决方案是自 ...
OkHttp实现文件上传进度
文件上传就一个没刻度的进度条在那里转怎么行,本篇带你实现上传进度,为你的进度条添加刻度吧,啥都不说了,重点重写RequestBody,看代码 import com.squareup.okhttp.*; ...
php大文件上传插件,PHP 大文件上传进度条实现
目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩 ...
java 上传进度条_Ajax上传文件并显示进度条
第四步:编写前端代码. 1.路径在当前项目的:src\main\resources\asyn.html 上传进度条 align="center"> 0% bordercol ...

使用canvas上传图片+上传进度

使用canvas上传图片+上传进度

实现效果:

后台java代码

方法一：canvas实现

方法二：img+canvas实现

使用canvas上传图片+上传进度相关推荐

最新文章

热门文章