Vue自定义指令结合阿里云OSS优化图片的实现方法

图片往往在加载前端项目中占大头,如何既不损失图片质量,又提升加载速度呢?

  • 根据显示设备pixelRatio和元素宽高来显示合适图片
  • 略微压缩图片质量
  • 使用webp

注册全局自定义指令

Vue.directive('img-condense', {
 bind: (el, binding, vnode) => {
  let src = el.getAttribute('src')
  let newSrc = compressImg(src, el)
  el.setAttribute('src', newSrc)
 }
})

获取元素宽高和显示设备pixelRatio

let compressImg = (imgUrl, el) => {
 // 获取显示设备 pixelRatio
 let pixelRatio = window.devicePixelRatio
 let elWidth = elStyle.width * pixelRatio
 let elHeight = elStyle.height * pixelRatio
 let resize = '/resize'
 if (elWidth) {
  resize += `,w_${elWidth}`
 }
 if (elHeight) {
  resize += `,h_${elHeight}`
 }
})

判断webp

let canUseWebp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0
let webp = ''
if (canUseWebp) {
 webp = '/format,webp'
}

质量降低至80%

let ossParam?x-oss-process=image${resize}/auto-orient,1/quality,Q_80/bright,-1${webp}

完整版

<img v-img-condense alt="Vue logo" src="../assets/logo.png">
Vue.directive('img-condense', {
 bind: (el, binding, vnode) => {
  let src = el.getAttribute('src')
  let newSrc = compressImg(src, el)
  el.setAttribute('src', newSrc)
 }
})
let compressImg = (imgUrl, el) => {
 // 如果不是oss 或者已经压缩过的图片直接返回
 if (imgUrl.includes('aliyuncs.com') || imgUrl.indexOf('blob') === 0 || imgUrl.includes('x-oss-process=')){
  return imgUrl
 }
 // 获取显示设备 pixelRatio
 let pixelRatio = window.devicePixelRatio
 let elWidth = el.width * pixelRatio
 let elHeight = el.height * pixelRatio
 let resize = '/resize'
 if (elWidth) {
  resize += `,w_${elWidth}`
 }
 if (elHeight) {
  resize += `,h_${elHeight}`
 }
 if (!elWidth && !elHeight) {
  resize = ''
 }
 // 判断webp
 let canUseWebp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0
 let webp = ''
 if (canUseWebp) {
  webp = '/format,webp'
 }
 return `${imgUrl}?x-oss-process=image${resize}/auto-orient,1/quality,Q_80/bright,-1${webp}`
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-11-11

Vue.js上传图片到阿里云OSS存储的方法示例

如何在VueJS使用阿里云存储上传图片? 什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service) 在实际开发中,公司可能会用到OSS随时来存储一些数据,比如像文本.图片.音频和视频等在内的各种非结构化数据文件,恰好,在做项目的时候,刚好用到了OSS存储,对于我这个萌新,从来没用过,那么我们先来看看文档,看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 (1)首先,打开官网-----https://www.aliyun.c

django 配置阿里云OSS存储media文件的例子

1. 安装django-aliyun-oss2-storage包 linux上用 pip install django-aliyun-oss2-storage 无报错,顺利安装 windows上报错: (python3_sbs) F:\projects\virtualenv\python3_sbs\Scripts>pip install django-aliyun-oss2-storage Collecting django-aliyun-oss2-storage Using cached dj

解决springcloud阿里云OSS文件访问跨域问题的实现

目录 引言 解决 引言 最近在高德地图中引用阿里云OSS存储的图片时,出现跨域访问问题,特此记录,以方便后续同学参考 解决 1.在阿里云OSS后台管理中,进入权限管理,进入跨域设置,添加跨域规则,设置来源为* 2.至此配置完成后访问图片还是会出现跨域问题,这是因为OSS文件默认会开启缓存,及后续访问的实际上是缓存的文件,这就会导致不能匹配到我们上述配置的跨域规则 于是我们需要将缓存禁用掉,如果文件就一两个的话,可以直接在后台中设置禁用缓存,将HTTP头中Cache-Control设置为no-ca

Java下载https文件并上传阿里云oss服务器

这篇文章主要介绍了Java下载https文件并上传到阿里云oss服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天做了一个从Https链接中下载音频并且上传到OSS服务器,记录一下希望大家也少走弯路. 一共两个类: 1 .实现自己的证书信任管理器类 /** * @author mazhq * @Title: X509TrustUtiil * @ProjectName: zeus * @Description: 证书信任管理器类 * @d

详解SpringBoot上传图片到阿里云的OSS对象存储中

启动idea创建一个SpringBoot项目 将上面的步骤完成之后,点击下一步创建项目 创建完成之后修改pom.xml文件,添加阿里云oss依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional&g

VUE 实现element upload上传图片到阿里云

首先安装依赖 cnpm install ali-oss 封装client 若是想减小打包后静态资源大小,可在index.html引入:(然后在client.js里注释掉const OSS = require('ali-oss')) <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> const OSS = require('ali-oss') expor

Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例

之前从没接触过Yii,借助的各方资源来做的这个整合阿里云OSS的SDK上传图片实例,如果有不正之处请指出! 前面参照了weinirumo 的介绍,大家可以自行去查看. 好了,下面开始进入主题: 准备工作:需要使用composer执行命令,如果没有安装composer的需要提前安装,参考文档:composer安装流程 1.项目目录结构 我使用的是基础版,只有后台目录,请自行对照自己的项目目录结构,会用到以下的几个目录: 2.在项目根目录下运行cmd命令 3.执行composer命令 切换到中国国内

ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例

本文实例讲述了ThinkPHP5+UEditor图片上传到阿里云对象存储OSS.分享给大家供大家参考,具体如下: ThinkPHP5使用富文本UEditor,将富文本编辑框内上传在本地的图片,修改到阿里云对象存储OSS ThinkPHP5加载UEditor ···· 略 UEditor下载:https://ueditor.baidu.com/website/download.html#ueditor (或本站下载:https://www.jb51.net/codes/56667.html) 阿里

浅析Docker私有镜像库与阿里云对象存储 OSS

Docker私有镜像库 Docker 私有镜像库与阿里云对象存储 OSS 镜像管理是 Docker 的核心,为了满足企业或组织内部分享镜像,Docker 官方在 Github上 建立了一个开源项目 docker-registry,专门用于自建 Docker 的私有镜像库. 快速启动支持阿里云对象存储 OSS 的 docker-registry 您可以从 https://github.com/docker/docker-registry 下载并安装 docker-registry,通过 pip 安