js优化上传大图片显示问题（压缩图片展示）

亲测有效，下面是上传后的图片加载时间以及压缩图片加载时间。

一、解决方案

上传文件时，发现上传4M的图片，上传时有进度条，但是进度条结束之后，加载图片耗时917ms,当用户焦急的盯着进度条结束后，还要等上传之后的图片加载时间，这期间没有任何提示信息。

优化方案：在文件上传后，获取文件流，进行压缩图片，优先展示压缩后的图片，然后把上传成功的图片进行替换，图片展示由模糊到清晰的，在用户未察觉之前，偷梁换柱。（以下，只js前端处理，具体上传逻辑不做说明）

上传之后的图片：

原图：

透明图片：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>upload</title>
<script src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js"></script>

</head>
<body>
<canvas id="canvasNew" width="400px" height="250px"></canvas>
<input type="file" id="upLoad" name="image" >
</body>
<script type="text/javaScript">
// 保存图片路径的数组
var urlArr = ["bg.png"];
// imgArr 保存加载后的图片的数组，imgArr中保存的是真实的图片
// loadImg 函数用来加载 urlArr 中所有的图片
// 并返回一个保存所有图片的数组
var imgArr = loadImg(urlArr);
// flag 用来限制点击事件，一张图片只会产生一次效果
var flag = false;

function loadImg(urlArr) {
   var index = 0;
   var res = [];
   // 每次给 load 函数传入一个图片路径，来加载图片
   load(urlArr[index]);
   function load(url) {
       // 如果 index 等于 urlArr.length，
       // 表示加载完全部图片了，就结束 load函数
       if (index == urlArr.length) {
           // 加载完全部图片，调用 init 函数
           //init();
           return;
       }

var img = new Image();
       img.src = url;
       // 不管当前图片是否加载成功，都要加载下一张图片
       img.onload = next;
       img.onerror = function () {
           console.log(res[index] + "加载失败");
           next();
       }
       // next 用来加载下一张图片
       function next() {
           // 把加载后的图片，保存到 res 中
           res[index] = img;
           load(urlArr[++index])
       }
   }
   // 最后返回保存所有真实图片的数组
   return res;
}

$(function(){
$('#upLoad').on('change',function(){
var filePath = $(this).val(), //获取到input的value，里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
imgBase64 = '', //存储图片的imgBase64
fileObj = document.getElementById('upLoad').files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象

// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}

// 调用函数，对图片进行压缩
compress(fileObj,function(imgBase64){
imgBase64 = imgBase64; //存储转换的base64编码
//$('#viewImg').attr('src',imgBase64); //显示上传图片
           loadResImg(imgBase64);
});
});
   生成图片由模糊到清晰效果
   function loadResImg(imgBase64){
       var img = new Image();
       img.src = imgBase64;
       var canvasNew = document.getElementById("canvasNew");
       var contextNew = canvasNew.getContext("2d");
       // 先在canvas上画透明的图片，然后再设置背景是上传的图片
       contextNew.globalCompositeOperation = "source-over";
       contextNew.drawImage(imgArr[0], 0, 0, 400, 250);
       canvasNew.style.background = 'url('+imgBase64+')';
       canvasNew.style.backgroundSize = "100% 100%";
   }

//不对图片进行压缩，直接转成base64
function directTurnIntoBase64(fileObj,callback){
var r = new FileReader();
// 转成base64
r.onload = function(){
//变成字符串
imgBase64 = r.result;
console.log(imgBase64);
callback(imgBase64);
}
r.readAsDataURL(fileObj); //转成Base64格式
}

// 对图片进行压缩
function compress(fileObj, callback) {
if ( typeof (FileReader) === 'undefined') {
console.log("当前浏览器内核不支持base64图标压缩");
//调用上传方式不压缩
directTurnIntoBase64(fileObj,callback);
} else {
try {
var reader = new FileReader();
               var data ;
reader.onload = function (e) {
var image = new Image();
var imageNew = $('<img/>');
image.οnlοad=function(){
square = 500, //定义画布的大小，也就是图片压缩之后的像素
canvas = document.createElement('canvas'),
                       context = canvas.getContext('2d'),
imageWidth = 0, //压缩图片的大小
imageHeight = 0,
offsetX = 0,
offsetY = 0,
data = '';

canvas.width = square;
canvas.height = square;
context.clearRect(0, 0, square, square);

if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = - Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);

data = canvas.toDataURL('image/jpeg');

//压缩完成执行回调
callback(data);

};
image.src= e.target.result;
};
reader.readAsDataURL(fileObj);
}catch(e){
console.log("压缩失败!");
//调用直接上传方式不压缩
directTurnIntoBase64(fileObj,callback);
}
}
}

});

</script>
</html>

js优化上传大图片显示问题（压缩图片展示）相关推荐

js如何上传大文件到服务器,js将文件上传到远程服务器
js将文件上传到远程服务器内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
vue2移动端上传，预览，压缩图片，解决拍照旋转问题
https://github.com/exif-js/exif-js http://code.ciaoca.com/javascript/exif-js/demo/ 因为最近遇到个移动端上传头像的需求 ...
html 前端优化上传视频,前端上传组件Plupload使用---上传大视频(分片上传)
上传视频到服务器 1.引入js插件: 2.html页面如图: 上传视频: 上传视频支持AVI.wma.rmvb.rm.flash.mp4.mid.3GP等格式 3.js代码 $(function ( ...
Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度
====================================================== 注:本文源代码点此下载 ================================= ...
图片服务器上图片的管理网站上传与前台显示
图片服务器上图片的管理网站上传与前台显示代码简介: 很实用的一个图片上传得例子图片上传:生成缩略图加文字水印图片水印 51aspx.png为水印图片远程图片抓取(保存到本地)支持jpg.g ...
exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本）
exif.js解决ios手机上传照片后显示为旋转90度问题(兼容ios13.4 ) 问题描述: 在做手机移动端app时,发现iOS12.5.1版本(iphone6)上传照片出现顺时针旋转90问题,ip ...
通过图片和base64互转，实现图片上传和下载显示以及踩坑
前言实现一个类似于微信的图片界面,包括拍照和相册,拍照包括裁剪,相册包括预览,可以选中指定张数的图片,将图片转换为base64上传到服务器.可以从服务器将已经上传的图片资源,通过base64字符串下 ...
织梦网站上传服务器不显示图片,织梦网站图片不显示图片
织梦网站图片不显示图片内容精选换一换在"文章列表"插件中,检查"设置 > 列表数目"的"显示文章条数"和"显示分页&q ...
java 上传图片后没法立马显示出来_SpringMVC多个文件上传及上传后立即显示图片功能...
多文件上传就是改良一个方法把MultipartFile类换成CommonsMultipartFile类,因为上传多个文件用数组方式的话MultipartFile类不能初始化,它不支持数组 packag ...

js优化上传大图片显示问题（压缩图片展示）

js优化上传大图片显示问题（压缩图片展示）相关推荐

最新文章

热门文章