vue——base64图片转网络URL

青旅半醒 2023-01-16 14:29 893阅读 0赞

## vue——base64图片转网络URL ##

#### src支持base64图片，正常base64图片可以直接复制到图片src，也可以将其转为URL ####

// data
    url: 'XXXXXXXX' // base64编码
    imgUrl: '' // 图片路径
    
    // methods
    base64ImgtoFile (dataurl, filename = 'file') { 
          const arr = dataurl.split(',')
          const mime = arr[0].match(/:(.*?);/)[1]
          const suffix = mime.split('/')[1]
          const bstr = atob(arr[1])
          let n = bstr.length
          const u8arr = new Uint8Array(n)
          while (n--) { 
            u8arr[n] = bstr.charCodeAt(n)
          }
          return new File([u8arr], `${ filename}.${ suffix}`, { 
            type: mime
          })
        },

#### 打印得到File文件，再转为png图片 ####

![在这里插入图片描述][20210426113029336.png]

const img = 'data:image/png;base64,' + img
    this.file = this.base64ImgtoFile(img) // 得到File对象
    this.imgUrl = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file) // imgUrl图片网络路径

[20210426113029336.png]: /images/20221022/6cc18f1a85a74cb39eb81fe936d69a7f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，893人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue——base64图片转网络URL

vue——base64图片转网络URL src支持base64图片，正常base64图片可以直接复制到图片src，也可以将其转为URL // data

青旅半醒/ 2023年01月16日 14:29/ 0 赞/ 894 阅读

相关 Base64转图片和图片转Base64

<template> <view> <view class="imgtext"> <im

爱被打了一巴掌/ 2023年01月13日 09:37/ 0 赞/ 255 阅读

相关 base64转图片

import java.io.File; import java.io.FileOutputStream; import java.io.OutputS

比眉伴天荒/ 2022年09月14日 13:27/ 0 赞/ 242 阅读

相关【Java开发】之网络图片转Base64

1、引入依赖 <dependency> <groupId>org.apache.httpcomponents</groupId>

客官°小女子只卖身不卖艺/ 2022年09月14日 02:16/ 0 赞/ 177 阅读

相关本地图片与网络图片转base64

package com.test.utils; import java.io.ByteArrayOutputStream; import ja

亦凉/ 2022年09月02日 15:49/ 0 赞/ 149 阅读

相关图片转Base64

c\提供了一个方法可以将字节数组转化为base64的格式，图片的转化就是利用了这么一个东西。图片转base64： try

古城微笑少年丶/ 2022年08月26日 13:16/ 0 赞/ 260 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 311 阅读

相关 base64转图片

import java.io.File; import java.io.FileOutputStream; import java.io.OutputS

╰半夏微凉°/ 2022年04月10日 04:41/ 0 赞/ 337 阅读

相关图片url转base64编码

Html <input type='file' class='upload-img' /> JQ $('.upload-img').on('change'

古城微笑少年丶/ 2022年03月17日 05:46/ 0 赞/ 364 阅读

相关图片转base64

html: <img src="img1.png"> js: 1 //海报转base64 2 funct

小咪咪/ 2021年12月23日 09:53/ 0 赞/ 386 阅读