【Delphi + Vue】Web后端动态图片传递给前端

最新推荐文章于 2022-10-18 10:28:59 发布

海纳老吴

最新推荐文章于 2022-10-18 10:28:59 发布

阅读量1.3k

点赞数

分类专栏： Vue Delphi 文章标签：前端 vue.js javascript 动态图片

本文链接：https://blog.csdn.net/sensor_WU/article/details/124989849

版权

Delphi 同时被 2 个专栏收录

145 篇文章 70 订阅

订阅专栏

Vue

21 篇文章 3 订阅

订阅专栏

在用Delphi做Web后台的时，有时需要用到后台动态生成二维码图片，给前端使用，虽然前端可以通过js库生成，目前流行的有 QR码生成器（在线）、QRCode.js（支持本地）、 arale-qrcode（支持本地）等，生成的效果也都满意。但是这些js库都使用的是H5的cavas来画图，在一些早期的Android设备上不支持（例如：Android 5.1）。在这种情况下，就需要后台生成好图片，然后经过base64编码后发送给前端，从而实现图片显示支持部分低版本的设备。如果应用不考虑低版本，当然直接使用js库就是很方便的。

言归正传，delphi 做后台，生成好图片信息，通过base64传递到前端，前端经过解码，实现图片显示。

一、服务端：Delphi 代码示例（需要单元：System.NetEncoding）

// 1. 按照stream 返回数据
  MM := TMemoryStream.Create;
  MM.LoadFromFile('a3650.jpg');  //如果动态生成的图片，就完全不需要文件装载，直接编码输出即可
  MM.Position := 0;     //注意，指针要移到首位
  SetLength(B,MM.Size);
  MM.Read(B[0],MM.Size);
  MM.Free;

  S := TNetEncoding.Base64.EncodeBytesToString(B);
  S := S.Replace(#13,'').Replace(#10,''); //经过delphi Base64后的编码，会中间插入回车换行，主要时便于肉眼观察，js前端实际使用中时不需要的
  B := TEncoding.UTF8.GetBytes(S);   //给前端的是UTF8编码
  C.Response.StatusCode := 200;        //返回状态码
  C.Response.Close(B);                //返回编码后的图片数据到前端

<div>
   <img :src="imgSrc" alt="">
</div>

axios.post('http://192.168.1.190/icenter/30001/J',
            {aaa:'123'},
            {headers: 
                {'Content-Type': 'application/x-www-form-urlencoded'}})
   .then(res => {
       this.imgSrc = 'data:image/jpg;base64,' + res.data; //imgSrc 是Vue中 img 标签的src
    });

三、需要注意的地方：

1、delphi进行的Base64编码需要将中间的回车换行（#13#10）去掉；

2、对于前端img标签，src表示的是图片源，格式一定是：data:image/jpg;base64, + 后台返回的信息。

3、在测试中，建议自己做一个10x10的小纯红色图片，这样调试起来数据比较小，简单很多。