在安卓手机中使用微信保存图片提示失败的处理

场景描述

在进行产品推广时，因为有不同的推广人员，所以推广用的海报，需根据不同的推广人员，展示不同的二维码。
在controller中动态生成海报，并返回图片流到页面进行展示。
实际操作时，安卓手机中长按海报图片，选择“另存到相册”，提示保存失败；选择转发给朋友，不弹出选择好友列表，转发失败。
但是在苹果手机中可正常保存和转发。

原因

在controller中返回的是一个图片流。
在页面处理图片时，是blob:xxx形式。而安卓微信不支持blob形式的图片进行“另存为”操作。

解决方案

将controller返回的图片流，转为base64形式显示

页面图片展示部分

<van-popup v-model="showSharePic">
  <van-loading v-if="loading" type="spinner" size="24px">正在生成海报</van-loading>
  <img v-else ref="posterImg" :src="posterImg" />
</van-popup>

api接口

使用axios

export default {
  genPic(id) {
    // 返回图片流
    return request.request({
      url: `/genPoster`,
      method: 'get',
      responseType: 'blob',
      headers: {'token': '123456'}
    })
  }
}

页面代码处理图片流blob形式

myApi.genPic(id).then(res => {
    this.loading = false
    // 输出图片流,注意，此方法会在src中生成blob:xxx形式的图片，在安卓手机的微信中，不能另存为，不能发送给朋友
    let src = window.URL.createObjectURL(res)
    this.posterImg = src
})

页面代码处理图片流base64形式

myApi.genPic(id).then(res => {
    this.loading = false
    // 使用下面的方式将图片流转为：data:image/jpeg;base64形式，赋值给图片的src
    const a = new FileReader()
    a.readAsDataURL(res)
    a.onload = e => {
      this.posterImg = e.target.result
    }
})

controller部分代码

BufferedImage bufferedImage = ImageTools.genPoster(......);

//输出图片流
res.setHeader("Pragma", "no-cache");
res.setContentType("image/jpeg");
res.setDateHeader("Expires", 0);
res.setHeader("Cache-Control", "no-store,no-cache,must-revalidate");
res.addHeader("Cache-Control", "post-check=0, pre-check=0");
try (ServletOutputStream outputStream = res.getOutputStream()) {
    //输出流输出图片,在页面为blob形式，注意：安卓手机无法将blob形式的图片保存，需要页面处理
    ImageIO.write(bufferedImage, "jpg", outputStream);
    outputStream.flush();
} catch (IOException e) {
    e.printStackTrace();
}