图片直接引入base64格式的

前言：

在使用canvas绘制图的时候，因为内部的图片是从云上拉下来的，我们拿到的是：“https://...” 格式的地址，然后在canvas中展示没有问题，最后下载的时候是报错，提示画布污染，最后采用的解决办法将线上地址发个后台，后台将 base64的地址发给前段，然后前段这边直接引。

注意：后台发过来的base64是没有前缀的，所以我们需要手动加

这是拿到的后台base格式文件

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

 let url = res.data.image;//转换以后的base64的地址//    'data:image/jpg;base64,'this.imgUrl = 'data:image/jpg;base64,'+url;

加上：'data:image/jpg;base64,'

然后将地址赋值给img的src就可以了，复制下面的demo,测试一下

（图片显示的不全很正常，使用中是好的）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img{width:500px;height:500px;}</style>
</head>
<body><img src="https://img-blog.csdnimg.cn/2022010702111875722.jpg"/>
</body>
</html>

图片直接引入base64格式的相关推荐

elementUI压缩图片和将图片转成base64格式
为了降低资源服务器的消耗.有些时候需要前端压缩图片,转码等一些处理. 一.Base64的优点和缺点图片转换成base64格式的优缺点 1. 优点 (1)base64格式的图片是文本格式,占用内存小, ...
py读取本地图片并返回图片给前端base64格式
py读取本地图片并返回图片给前端base64格式直接贴代码,有用请收藏 from fastapi import FastAPI from get90V import resBody, getRewr ...
uni-app 调用相机或相册图片并转为base64格式上传图片
1.调用相机或相册上传图片 uni.chooseImage({count: 1, // 最多可以选择的图片张数sizeType: ['original', 'compressed'], // 可以指定 ...
【前端图片转化】 base64格式转为 File文件类型
下面的函数能将base664格式用于已知bseae64 转File格式上传求点赞!! 关注!! 收藏 !! base64格式的图片不能直接上传到oss图片服务器的,需要转换成file文件流的形式上 ...
将图片转化成base64格式
// 如果用户选择了图片就将图片转化为base64位的格式进行存储和使用// 第一步:先读取文件const base = new FileReader()// console.dir(base)// ...
前端 img图片如何展示 base64 格式（并且下载到本地）
如题:最近在做项目发现页面上有些图片是动态获取的,也就是后台给我们返回图片的存放地址,一般都是放在服务器上的某个位置,我们直接拿到渲染一下就行了,(前提是不存在跨域问题), 但是由于项目特殊性,后台使 ...
img src 引入base64格式数据显示图片
看到公司项目里用 base64 传输数据到页面! 其中 jsp这么写的: <td><c:choose> <c:when test="${photo ...
mysql 事物gljbie_图片转成base64格式上传至数据库
图片上传上传 var fileInput = document.getElementById("image_upload"); //选择文件 fileInput.addEvent ...
图片转成base64格式上传至数据库
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...

图片直接引入base64格式的

前言：

注意：后台发过来的base64是没有前缀的，所以我们需要手动加

这是拿到的后台base格式文件

加上：'data:image/jpg;base64,'

然后将地址赋值给img的src就可以了，复制下面的demo,测试一下

（图片显示的不全很正常，使用中是好的）

图片直接引入base64格式的相关推荐

最新文章

热门文章