将gif图转成静态图片显示canvas

2023-11-03

需求描述

仅一张gif动图,进入页面,呈现静态图片显示,点击,gif图显示。

代码实现

  <el-image
          style="width: 100px; height: 100px"
          :src="props.data.row.thumbnail_url"
          class="gif-img"
          fit="contain"
        />



onMounted(async () => {
  setTimeout(() => { 
  // 页面获取得到数据,渲染后再获取dom
  // 如果还获取不到,得到数据后,再渲染页面(外层v-if)
    handleStaticImg()
  })
})

const handleStaticImg = () => {
  const imgAllElement = document.querySelectorAll('.gif-img')

  Array.from(imgAllElement).forEach((element) => {
    // console.log(element.children[0], (element.children[0] as any).naturalHeight)
    ;(element.children[0] as any).onload = () => {
      const imgElement = element.children[0] as any
      if (imgElement.naturalHeight) {
        const canvas = document.createElement('canvas') as any
        // 尺寸
        const naturalHeight = imgElement.naturalHeight
        const naturalWidth = imgElement.naturalWidth
        const rate = Math.max(naturalHeight, naturalWidth) / 100
        const width = naturalWidth / rate,
          height = naturalHeight / rate
        if (width && height) {
          // canvas大小
          canvas.width = width
          canvas.height = height
          // 绘制图片帧(第一帧)
          canvas.getContext('2d').drawImage(imgElement, 0, 0, width, height)
          // 重置当前图片
          try {
            imgElement.src = canvas.toDataURL('image/gif')
          } catch (e) {
            // 跨域
            console.log(e)
            // 隐藏原图
            imgElement.style.display = 'none'
            // 载入canvas元素
            canvas.style = 'position:absolute;top:0;bottom:0;margin:auto;left:0'
            // 前面插入图片
            imgElement.parentElement.insertBefore(canvas, imgElement)
            // 存储canvas
            imgElement.storeCanvas = canvas
            canvas.addEventListener('click', (event: any) => {
              event.path[1].children[1].style.display = 'inline-block'
            })
          }
        }
      }
    }
  })
  // console.log(imgAllElement)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将gif图转成静态图片显示canvas 的相关文章

  • 如何在phonegap应用程序中使用存储在localStorage中的json feed?

    这就是我正在做的 向我的网络服务器发出请求 响应采用 json 格式 使用 jquery 模板在我的应用程序中呈现回调数据 非常简单 就像魅力一样 问题是 我想在本地存储一些数据 这样我的应用程序就不必每次都从服务器获取它 3g 很慢 每笔
  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 如果替换路径中的最后一个元素,React Router v6 useNavigate() 不会导航

    我有一个具有以下功能的反应组件 const handleNavigate clientId gt console log clientId navigate dashboard clients clientId console log 显示
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • 如何设置在浏览器的新选项卡(_blank)中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • 如何在 Angular @Input 中仅接受预定义值

    我的问题是 我在 a 中收到一个字符串值作为组件的参数 但我想限制可以用作参数的值 就像enum I use Input type string 但是在组件中 一切都可以引入type正如我之前所说 我需要将其限制为 3 个选项 例如Enum
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh
  • 使用 javascript Array reduce() 方法有什么真正的好处吗?

    reduce 方法的大多数用例都可以使用 for 循环轻松重写 对 JSPerf 的测试表明 reduce 通常会慢 60 75 具体取决于每次迭代内执行的操作 除了能够以 函数式风格 编写代码之外 还有什么真正的理由使用reduce 吗
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • C++ 常用的八种排序方法

    C 常用的八种排序方法 稳定性 排序后 2 个相等键值的顺序和排序之前它们的顺序相同 插入排序 思想 类似打扑克时的排序方法 将第一待排序序列第一个元素看做一个有序序列 把第二个元素到最后一个元素当成是未排序序列 从头到尾依次扫描未排序序列
  • (React入门)组件、组件样式、事件处理

    组件的创建 类组件 类组件 顾名思义 也就是通过使用ES6类的编写形式去编写组件 该类必须继承React Component如果想要访问父组件传递过来的参数 可通过this props的方式去访问 在组件中必须实现render方法 在ret
  • Vite按需引入自定义组件unplugin-vue-components

    1 安装插件 npm i unplugin vue components D 2 vite config ts文件加如下代码 plugins vue reactivityTransform true Components extension
  • html 学习 常用的html标签及使用

    html是什么 超文本标记语言 Hypertext Markup Language HTML 是一种用于创建网页的标记语言 本质上是浏览器可识别的规则 我们按照规则写网页 浏览器根据规则渲染我们的网页 对于不同的浏览器 对同一个标签可能会有
  • nginx下载安装启动(mac)

    为了方便下载管理 建议下载brew工具 bin zsh c curl fsSL https gitee com cunkai HomebrewCN raw master Homebrew sh 使用brew安装nginx brew inst
  • 利用stm32cubemx生成单极性倍频spwm调制代码步骤

    利用stm32实现单极性倍频SPWM调制 电赛必备 哔哩哔哩 利用stm32cubemx生成单极性倍频spwm调制 首先打开cubemx选择mcu型号 配置时钟等 很多教程讲得很好 我这就跳过这些 接下来来到定时器的配置 对于全桥电路 需要
  • 代码管理工具github+git+tortoisegit下载

    GitHub是世界上最大的代码托管平台 是程序员的必备神器 Git 是一个开源的分布式版本控制系统 用于敏捷高效地处理任何或小或大的项目 tortoisegit是一款开源的git的版本控制系统 也叫海龟git TortoiseGit的安装和
  • Session 简介及绑定

    session是什么 其实session是一个存在服务器上的类似于一个散列表格的文件 里面存有我们需要的信息 在我们需要用的时候可以从里面取出来 说起session的作用 简单的举个例子 我们在登录某些网站的时候 输入了用户名密码 登录以后
  • GTest测试框架使用

    Gtest框架简介 Gtest是Google Test的简称 是Google开发的C 单元测试框架 适用于多个平台 Liunx Mac OS X Windows Cygwin Windows CE and Symbian PlatformI
  • OpenWrt-uci脚本命令

    转自 http developer t firefly com thread 1035 1 1 html 目录 1 UCI命令 2 UCI的文件和流程 3 UCI 的文件语法 4 UCI 命令读写配置 5 综合实例 1 UCI命令 一个众所
  • 国内知名公共DNS服务器 IP

    国内知名公共 DNS 服务器 IP 腾讯 DNS 119 29 29 29 182 254 116 116 阿里 DNS 223 5 5 5 223 6 6 6 百度 DNS 180 76 76 76 114DNS 114 114 114
  • osg学习(六十八)序列化插件加载过程

    加载D OSG OAGEARTH x86 bin osgPlugins 3 6 3 osgdb serializers osgd dll
  • 微信小程序 公众号 订阅消息 模板 正则 参数校验

    自己配置订阅消息模板 如果参数格式不正确 会导致订阅消息发不出去 所以在创建模板的时候需要校验参数格式 订阅通知参数值内容限制说明 微信官方文档 创建模板 代码
  • qt 信号发送太快,槽太慢的解决办法

    手机码字太慢 自己看 ifndef THREADTEST H define THREADTEST H include include include include class ThreadTest public QObject Q OBJ
  • 职业规划-IT方向(超详细,超具体)

    前言 今天是周五 本来想好好休息 前天写了一篇博文 说出我的故事 献给正在迷茫的你 不少读者留言不知该如何做职业规划 于是继续拖着忙碌了一周疲倦的身体 坐在电脑前 吹着电扇 提笔写下这篇 职业规划 IT方向 如果你是应届生 或者准备转行 I
  • Django项目想要在 Python Console里面进行操作 报错找不到对应模块

    Django项目想要在 Python Console里面进行操作 报错找不到对应模块 问题描述 ModuleNotFoundError No module named django 问题原因 在进行对 Python console操作 进行
  • 6.1-深度学习简介

    文章目录 一 深度学习的三个步骤 1 1 全连接前馈网络 Fully Connect Feedforward Network 1 2 矩阵运算 Matrix Operation 1 3 手写数字辨识 二 确定评价函数 goodness of
  • 静电电容

    1 用电容进行ESD的防护只能用数pF到数百pF的小电容 这里关注的不是容量而是串联等效电感参数 静电放电极快 对应极高的频率 耐压的问题不用考虑 因为静电源内阻极高 能量很小 放电时电压跌落极快 2 理论上讲大电容并不会因为时间常数的增加
  • ❤echarts折线图完整使用及详细配置参数

    echarts折线图完整使用及详细配置参数 进入echarts官网 查看案例 下面说说一些echarts图的调节 一 配置echarts具体参数 01 基础版本的折线图 option xAxis type category data Mon
  • 将gif图转成静态图片显示canvas

    需求描述 仅一张gif动图 进入页面 呈现静态图片显示 点击 gif图显示 代码实现