vue 下载base64位图片

最新推荐文章于 2023-10-26 15:48:43 发布
最新推荐文章于 2023-10-26 15:48:43 发布
阅读量993 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renlihui8617/article/details/126776301
版权 
    async getBase64() {
      const dataurl = document.getElementById('erCode').src//选择图片id
      this.downloadBase64(dataurl, this.erCode_name)
    },
    downloadBase64(originURL, name) {
      const a = document.createElement('a')
      a.href = originURL
      a.download = name
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
任立辉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue下载base64格式的图片】
qq_38140894的博客
12-14 2139
1、创建downLoad.js文件 class Download { //引用调用的方法，传入文件名称和bas64格式的文件 downloadFile(fileName, content) { let aLink = document.createElement('a'); let blob = this.base64ToBlob(content); //new Blob([content]); let evt = docum
vue 下载base64格式图片到电脑
laoyaoshilaoyao的博客
08-01 1080
下载base64图片地址到电脑
前端vue项目中如何把base64转换为图片并下载
Mr__proto__的博客
04-28 6525
html2canvas插件画出一个图并下载到本地
Vue实现base64编码图片间的切换功能
12-13
前言 昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求，每张图片在鼠标移入时都要更换图片路径，展示一个新的图片，由于每张图片大小都在2~6kb之间，webpack中配置了图片在10kb以内自动转换base64，所有就有了本篇文章的分享。先给大家展示下最后要实现的效果 实现思路 给每个元素添加@mouserover事件和@mouseleave事件 绑定函数，传用于识别当前参数的标识 根据所传参数判断当前状态下应该显示什么图片 解析渲染 实现过程 从json文件中读取图片信息集合，循环渲染json文件中的图片，传当前元素和当前图片的一些信息过去 <div class="
base64图片下载功能
qq_42089654的博客
10-16 566
描述：近期在H5项目中，通过html2canvas生成了一个base64的海报（图片）。但是这个图片怎么下载到手机上呢。 代码如下： function downloadImage(base64Url) { let imgUrl = base64Url; if (window.navigator.msSaveOrOpenBlob) {//兼容IE浏览器的写法 l...
vue批量下载base64图片
m0_62873187的博客
06-07 933
/ base64 格式图片转 blob 对象。// 遍历图片数组，将每张图片添加进 zip 包。// 将图片添加进 zip 包。// 创建一个 jsZip 实例。// 生成 zip 文件并下载。
Vue Base64文件下载
寻找09之夏的博客
01-21 2009
问题： vue项目开发中，接口返回Base64文件（一张图片），前端需要下载该图片。 解决： let base64 ='data:image/png;base64,'+this.initData.code"; // 文件base64 this.downloadFile('小程序码.png', base64); // 下载Base64文件 downloadFileByBase64(data, fileName) { const blob = this.base64ToBlob(data);
vue项目base64字符串转图片的实现代码
10-18
主要介绍了vue项目base64字符串转图片的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue项目pdf(base64)转图片遇到的问题及解决方法
10-17
主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
vue.js图片转Base64上传图片并预览的实现方法
10-18
主要介绍了vue.js图片转Base64上传图片并预览的实现方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
base64图片保存到本地(vue)
qq_40110620的博客
08-27 4886
开发过程中相信不少同猿们都碰到过图片下载的需求。 先说下思路： a)、创建a标签； b)、把base64转为blob对象； c）、通过URL.createObjectURL方法复制给a标签的href属性； 我封装在了一个js文件里，这样如果项目中不止一次用到，就可以直接引入使用。 js class Download { //对外暴露下载接口。 downloadFile(fileName, content) { l...
vue根据后端返回的base64图片数据转成图片并下载
五颜六色的白
10-26 670
原文参考：https://blog.csdn.net/xiaozhidian/article/details/129166541?
vue实现base64编码上传下载图片
weixin_42860747的博客
07-27 1557
base64编码上传图片 <input type="file" id="id" name="imageOne" @change="imageOne" accept="image/jpg, image/jpeg, image/png" /> 设置input标签的type属性为file imageOne() { let files = document.getElementById("id").files[0]; //转码b
vue 生成二维码为base64格式并下载到电脑
lannieZ的博客
06-20 1515
【代码】vue 生成二维码为base64格式并下载到电脑。
vue项目 base64转换为图片并下载
唐屁屁
11-02 1334
vue项目 base64转换为图片并下载
vue 项目中 base64格式文件下载
u010328533的博客
12-30 2978
vue 项目中 base64格式文件下载 其中 this.info 是里包含后端返回的base64文件 数据结构如图 <template> <div> <el-dialog :title="title" width="40%" :visible.sync="visible" :before-close="onClose" :close-on-click-modal="false" v-on=
vue base64图片转file流 下载到本地 或者上传
公子肆
08-22 1476
【代码】vue base64图片转file流 下载到本地 或者上传。
通过base64实现图片下载功能（基于vue）
weixin_30492601的博客
05-09 1829
1. 使用场景 当我们处理图片下载功能的时候，如果本地的图片，那么是可以通过canvas获得图片的base64的，方法如下。但是如果图片的url存在跨域问题的话，下面的方法将行不通，这时候我们可以另辟蹊径，将后台的同学，将图片以base64的形式进行返回。 function getBase64(url){ //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 ...
vue 下载base64图片
最新发布
02-29
在Vue中下载Base64图片可以通过以下步骤实现： 1. 首先，将Base64图片数据转换为Blob对象。可以使用`atob`函数将Base64字符串解码为二进制数据，然后创建一个Uint8Array数组，并将解码后的数据存入其中。最后，使用`new Blob()`函数将数组转换为Blob对象。 ```javascript function base64ToBlob(base64Data) { const byteCharacters = atob(base64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += 512) { const slice = byteCharacters.slice(offset, offset + 512); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } return new Blob(byteArrays, { type: 'image/png' }); // 根据实际图片类型进行修改 } ``` 2. 创建一个下载链接并设置其属性。使用`URL.createObjectURL()`函数创建一个临时的URL，然后将其赋值给下载链接的`href`属性。同时，设置链接的`download`属性为所需的文件名。 ```javascript function downloadImage(blob, fileName) { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = fileName; link.click(); URL.revokeObjectURL(url); } ``` 3. 调用上述函数进行下载。在Vue组件中，可以在需要下载图片的地方调用上述函数，传入Base64数据和文件名。 ```javascript // 在Vue组件中的方法中调用 downloadBase64Image() { const base64Data = '...'; // 替换为实际的Base64图片数据 const fileName = 'image.png'; // 替换为实际的文件名 const blob = base64ToBlob(base64Data); downloadImage(blob, fileName); } ``` 这样，当调用`downloadBase64Image`方法时，会触发下载操作，将Base64图片保存为文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值