JS上传图片前根据图片尺寸压缩后再上传

最新推荐文章于 2022-12-12 08:45:00 发布

神夜大侠

最新推荐文章于 2022-12-12 08:45:00 发布

阅读量423

点赞数

分类专栏： JQUERY + JS + CSS

本文链接：https://blog.csdn.net/u012015434/article/details/98483023

版权

JQUERY + JS + CSS 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- layui框架 -->
    <link rel="stylesheet" href="layui/css/layui.css">    
    <script type="text/javascript" src="jquery.js"></script>
    <title>图片上传</title>
</head>
<body>


<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>
<script type="text/javascript" src="layui/layui.js"></script>
<script>
  layui.use('upload', function () {
    var upload = layui.upload;
    var layer = layui.layer; 
    //执行实例
    var uploadInst = upload.render({
      elem: '#test1', //绑定元素
      url: '图片上传接口', //上传接口
      accept: 'images',
      auto: false,
	  field:'uploadFile',
	  choose: function(obj){	
	    var that = this;	  
		obj.preview(function(index, file, result){
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function(e) {
				dealImage(this.result, {width: 1024}, function (base) {
					var filet = dataURLtoFile(base, file.name);	
					that.data = {fileType:'productImg',id:'1'};				
					obj.upload(index,filet);
				});
			} 
		});
	  },	  
      done: function (res) {
        //上传完毕回调
      },
      error: function () {
        //请求异常回调
      }
    });
  });
 
/** 图片压缩 返回base64 */
function dealImage(path, obj, callback){
    var img = new Image();
    img.src = path;
    img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.75;  // 默认图片质量为0.9
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality );
        // 回调函数返回base64的值
        callback(base64);
    }
}

/** base64转file
 * filename图片的名字，dataurl是base64地址
 */
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}
 
</script>


</body>
</html>

神夜大侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS上传图片前根据图片尺寸压缩后再上传

<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="layui/css/layui.css"> <script type="text/...
复制链接

扫一扫

专栏目录