图片直接引入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,'  

然后将地址赋值给imgsrc就可以了,复制下面的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="data:image/jpg;base64,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"/>
</body>
</html>
发布了128 篇原创文章 · 获赞 49 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/qq_41619796/article/details/103823101