首页 > 其他分享 >vue 下载图片

vue 下载图片

时间:2024-04-08 10:23:28浏览次数:22  
标签:vue const URL url link blob document 下载 图片

<a href="https://example.com/image.jpg" rel="external nofollow"  download>下载图片</a>
// 下载图片
   async downloadImage(e) {
     // 获取图片对象和画布对象
     const imgUrl = https://example.com/image.jpg
     const response = await fetch(imgUrl)
     const blob = await response.blob()
     // 创建下载链接
     const url = window.URL.createObjectURL(blob)
     const link = document.createElement('a')
     link.href = url
     link.download = 'image.png'
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
     // 释放 Blob URL
     window.URL.revokeObjectURL(url)
   }

来源:https://www.jb51.net/javascript/294186q23.htm

标签:vue,const,URL,url,link,blob,document,下载,图片
From: https://www.cnblogs.com/kpengfang/p/18120538

相关文章

  • 深入了解图片Base64编码
    title:深入了解图片Base64编码date:2024/4/810:03:22updated:2024/4/810:03:22tags:Base64编码图片转换HTTP请求前端开发移动应用性能优化图片压缩1.什么是Base64编码Base64编码是一种将二进制数据转换为文本字符串的编码方式,通过将数据转换为一种可打印的......
  • Vue3入门笔记【黑马】
    目录:认识Vue31.Vue3的优势使用create-vue搭建Vue3项目1.认识create-vue2.使用create-vue创建项目熟悉项目和关键文件组合式API-setup选项1.setup选项的写法和执行时机2.setup中写代码的特点3.setup语法糖组合式API-reactive和ref函数1.reactive2.ref3.re......
  • 「GIS数据」下载全国的GeoJSON、shp格式数据(精确到乡镇街道级)-2024年4月更新
    发现个可以免费下载全国 geojson 数据的网站,推荐一下。支持全国、省级、市级、区/县级、街道/乡镇级以及各级的联动数据,支持导入矢量地图渲染框架中使用,例如:D3、Echarts等geojson数据下载地址:https://geojson.hxkj.vip该项目github地址:https://github.com/TangSY/echarts-m......
  • 微信小程序下载音频
    微信现在几乎已经成为所有人的必备app,于是就有很多人在微信小程序购买了音频资源,比如英语听力,这里就教大家一个能够下载90%的小程序资源的工具:下载高手下载高手不只是能下载音频,还能下载视频和图片。这里已经打包好了下载高手链接:https://pan.baidu.com/s/1qJ81sNBzzzU0w6D......
  • 短剧小程序视频怎么下载
    短剧小程序视频官方没有提供下载按钮,这里教大家一个方法,不用录屏这种效率低下的方法,而是采用效率较高的抓包下载方法:下载高手链接:https://pan.baidu.com/s/1qJ81sNBzzzU0w6DWf-9Nxw?pwd=l09r 提取码:l09r --来自百度网盘超级会员V10的分享有些人可能会问,既然抓包为什......
  • avue表格 超过个数不能勾选
    <avue-crudrow-key="id"reserve-selection@selection-change="selectionChange"></avue-crud>data(){return{maxSelectionCount:10,//设定最大勾选条数}},//选中的数据list是全部的数据,数组,//拿取数据的唯一id并赋值,批量删除使用selec......
  • buuctf-misc-刷新过的图片
    解压后发现是张图片按照之前图片题的思路,我们依次检查了图片属性、图片十六进制、LSB隐写,都没有发现隐藏信息也尝试了之前做过的题buuctf-misc-九连环中的隐写方法steghide,都没有发现隐藏信息那么这道题其实用的是另一种隐写方式F5隐写用到的工具F5-steganography将Misc.j......
  • 前端【VUE】06-vue【组件组成】【组件通信】【进阶语法】
    一、组件的三大组成部分(结构/样式/逻辑)组件的三大组成部分组件的样式冲突scoped1、components目录下components/BaseOne.vue1<template>2<divclass="base-one">3BaseOne4</div>5</template>67<script>8exportdefault{9......
  • 前端【VUE】05-vue【工程化开发入门】【工程化开发和脚手架、项目运行流程、组件化、
    工程化开发 脚手架VueCLI基本介绍:VueCLI是Vue官方提供的一个全局命令工具。可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】好处:1.开箱即用,零配置 2.内置babel等工具3.标准化修改npm源: npmconfigsetr......
  • STK入门(星座建立、导出卫星位置csv、地图源图片位置)
    1.建立星座1.1初始化场景打开STK,依次点击continue-createanewscenario记住场景命名和保存位置默认的仿真时间是一天,暂不需要修改点击ok耐心等待较长时间1.2建立种子卫星场景建立好以后自动弹出Insert 选择Satellite-Orbitwizard主要定义参数为:轨道倾角Incl......