https://developer.aliyun.com/mirror/npm/package/image-conversion

npm i image-conversion --save # or yarn add image-conversion
import { compress, compressAccurately } from "image-conversion";
// 要用前先引用
 
handleBefore(file) {
      /** 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 */
      return new Promise((resolve, reject) => {
        const _URL = window.URL || window.webkitURL;
        const isLt2M = file.size / 1024 / 1024 > 2; // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        const img = new Image();
        img.onload = function() {
          file.width = img.width; // 获取到width放在了file属性上
          file.height = img.height; // 获取到height放在了file属性上
          const imgwidth = img.width > 1280; // 图片宽度
          const imgheight = img.height > 1280; // 图片高度
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (imgwidth && isLt2M && imgheight) {
            compressAccurately(file, {
              size: 2048,
              width: 1280,
              height: 1280
            }).then(res => {
              resolve(res);
            });
          }  else resolve(file);
        }; // 需要把图片赋值
        img.src = _URL.createObjectURL(file);
      });
    },
 
 
再一些的浏览器上会出现一些报错  报语法错误  解决办法
  npm install babel-polyfill

1.兼容IE9/IE10可能会遇到语法或者 Promise错误,安装 babel-polyfill

npm install babel-polyfill

2.在页面入口配置main.js中引入 babel-polyfill

import 'babel-polyfill'

3.vue.config.js页面配置 disableHostCheck: true,(最后注释掉了)

  

vue 图片优化的更多相关文章

  1. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  2. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  3. Web前端性能优化之图片优化

    我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...

  4. 浅谈CSS样式png、gif、jpg图片优化的方法

    一.PNG.GIF.JPG图片对比 在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节,每个图形格式都有自己的优势和拖弱点,知道他们会使你得到更好的视觉质量和压缩品质. 网页图片优化是网页 ...

  5. js/vue图片压缩

    js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...

  6. Web 性能优化: 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

  7. VB|xp风格:终于解决了“图片优化软件”在部分xp系统上无法启动的问题。

    一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到p ...

  8. vue图片、背景图片路径问题

    vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...

  9. 前端性能优化之优化图片 && 优化显示图片

    前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢? 零. 认识图片 我们通常使用的图片 ...

随机推荐

  1. nginx 负载均衡设置

    upstream lucky5{ server 127.0.0.1:3000 weight=10; server 127.0.0.1:3001 weight=5; } server{ location ...

  2. java面试官最爱问的垃圾回收机制,这位阿里P7大佬分析的属实到位

    前言 JVM 内存模型一共包括三个部分: 堆 ( Java代码可及的 Java堆 和 JVM自身使用的方法区). 栈 ( 服务Java方法的虚拟机栈 和 服务Native方法的本地方法栈 ) 保证程序 ...

  3. FL Studio中的Fruity slicer采样器功能介绍

    本章节采用图文结合的方式来给大家介绍电音编曲软件FL Studio中的Fruity Slicer采样器的功能,感兴趣的朋友可一起来交流哦. Fruity slicer(水果切片器)插件是FL Stud ...

  4. CorelDRAW不同选择工具的作用及用法汇总

    在CorelDRAW中,"选择工具"是我们的好助手之一."选择工具"图标位于CDR界面左边的工具箱中.使用鼠标单击图标右下角的小三角,我们可以看到"选 ...

  5. 找回消失的IDM嗅探下载浮动条的方法

    我们之前讲了IDM资源嗅探的下载浮动条的设置方法,然而在有些时候,这个下载浮动条无法正常显示出来,影响了下载体验,这个问题该如何解决呢? 1.安装IDM扩展程序 一般来说,在IDM安装完成后,会在浏览 ...

  6. SpringSecurity之整合JWT

    SpringSecurity之整合JWT 目录 SpringSecurity之整合JWT 1. 写在前面的话 2. JWT依赖以及工具类的编写 3. JWT过滤器 4. 登录成功结果处理器 5. Sp ...

  7. 中级实训Android学习记录——Toast、AlertDialog、ProgressBar

    学习记录 2020/11/22 Toast Toast Toast是一个消息提示组件 我们可以设置其显示的位置 自定义其显示的内容 对Toast的简单封装可以达到不同的目的 Toast的默认用法 To ...

  8. I/O中的 同步异步,阻塞非阻塞

    I/O中的同步和异步的概念和线程中不太一样. I/O写的时候,默认是写到页高速缓存就返回的,然后异步刷到磁盘上.而同步的I/O指的是改动写到磁盘上之后才会返回结果.可以通过fsync(),和fdata ...

  9. ubuntu 安装scapy

    官网下载最新安装包:https://scapy.net/ 下载之后进入相应文件夹解压: 然后进入相关文件夹启动setup.py: 成功:

  10. rest-framework 版本控制

    一 作用: 用于版本的控制 二 内置的版本控制类: from rest_framework.versioning import QueryParameterVersioning,AcceptHeade ...