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}`
}

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

赞 (0)

相关推荐

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

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

  • 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', newS

  • yii2.0整合阿里云oss删除单个文件的方法

    主要思路,在controller里边通过获得要删除的文件fileid,把fileid传递给model的deletefile方法进行处理,并返回处理结果. 在deletefile方法里边,先根据id找到对应的文件信息,然后删除数据里边的记录和阿里云oss里边的文件和本地的文件. 主要步骤如下: 1 首先是构建一个view视图,或者写一个ajax发送请求,此处代码略(让前端去写吧). 2 在控制器里边接收参数,并转交给model.控制器UploadController.php里边的代码参考如下: /

  • springboot操作阿里云OSS实现文件上传,下载,删除功能

    参考资料:Java操作阿里云OSS操作官方文档 学会看文档,并实际运用也是一种习惯和技能 下面就来简单入门一下,用当下比较热门的Springboot 去操作阿里云OSS文件存储. 1.需求 (没踩过下面的坑的小伙伴可以直接跳过这一章节) 问题简述 首先,我在之前自己做一些开源小项目案例中遇到一些文件上传下载的问题,比如在本机文件上传和下载都可以正常使用,通过将文件上传到Springboot项目的根目录下,按日期分文件夹,文件访问也很方便,可以直接返回文件相对路径地址,并直接可以访问. 问题 然而

  • Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

    Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

    我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名 所以 换了java后台来修改名字.以下代码 我做的网页是点击文件直接下载 直接下载下来了,一开始的文件名是上传到oss时以id命名的名字,现在下载的时候想改名,遇到了问题,所以写了这篇博客 首先是后台代码 /** * 附件下载 * <p> * * @param param * @return ResponseDTO */ @PostMapping(value = "/downl

  • yii2.0整合阿里云oss的示例代码

    yii2.0整合阿里云oss的示例代码

    主要思路,首先用composer下载阿里云oss的php sdk,然后自定义一个组件,就能够在全局调用阿里云oss了. 具体步骤如下: 1 到阿里云官网找到php sdk,网址为https://help.aliyun.com/document_detail/32099.html?spm=5176.87240.400427.40.s8EbEH 2 使用composer安装,在项目目录下(basic/)输入: composer require aliyuncs/oss-sdk-php 安装完成以后,

  • php版阿里云OSS图片上传类详解

    本文实例讲述了php版阿里云OSS图片上传类.分享给大家供大家参考,具体如下: 1.阿里云基本函数 /** * 把本地变量的内容到文件 * 简单上传,上传指定变量的内存值作为object的内容 */ public function putObject($imgPath,$object) { $content = file_get_contents($imgPath); // 把当前文件的内容获取到传入文件中 $options = array(); try { $this->ossClient->

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • 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

  • vue自定义指令实现仅支持输入数字和浮点型的示例

    再开始本篇的讨论之前,先思考几个问题: 使用html元素属性type='number'是否可以满足要求 Vue中指令一般被设计用来操作dom元素的,而vue视图是基于数据模型的,如何在操作dom的同时,同时更新数据 你定义的指令不能只能在input元素上使用,还要支持在其父元素上使用,自定义组件及第三方组件上使用 你的指令是不是支持局部作用域,比如for循环渲染的数据的单元item,如何识别这个item进行数据更新和dom操作 如何控制字符数目,超出禁止输入 如何实现全局性的功能定义,从而在各个

随机推荐