精彩文章免费看

各种返回图片在前端显示以及转化

前言

作为前端工程师 的我们,日常少不了会跟图片打交道。
以下是我了解的。

一、图片在后端中存储

一般来说,图片在后端的存储方式分为两种:
其一:可以将图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中;
其二:将图片转换成二进制流,直接存储到数据库的 Image 类型字段中.

对于第一种存储方式,我们前端直接将存储路径赋值给 src 属性即可轻松显示。
对于第二种存储方式,我们前端需要将其二进制流交由 blob 对象处理,然后通过 blob 的 API 生成临时 URL 赋值给 src 属性来显示。

二、在 chrome 的 network 查看的时候,返回的也是这个图片(二进制)

出现问题的原因的axios 默认返回的是 json 文本形式,二进制图片数据被强制转换成了 json 文本形式。
找到了原因,解决方案就好办了。我们在 axios 里面,responseType 默认返回数据类型是 json,将其改为返回数据类型 blob。

  export function miniprogramQrcode (params) {
  return axios.post(
    env.MI_URL + '/XXXX/XXX/XXXX',
    params,
    // 将responseType的默认json改为blob
    responseType: 'blob',
    emulateJSON: true
  }).then(res => {
    if (res.data) {
      return Promise.resolve(res.data)
    } else {
      throw res
  }).catch(err => {
    return Promise.reject(err)

接下来的问题是,如何处理blob对象,将其显示在前端页面呢?

  createMiniQrcode (blob) {
  let img = document.createElement('img')
  img.onload = function (e) {
    // 元素的onload 事件触发后将销毁URL对象, 释放内存。
    window.URL.revokeObjectURL(img.src)
  // 浏览器允许使用URL.createObjectURL()方法,针对 Blob 对象生成一个临时 URL。
  // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
  img.src = window.URL.createObjectURL(blob)
  document.querySelector('.imgQrCode').appendChild(img)

三、url、base64、blob,三者之间转化

return new Promise ((resolve,reject) => { let image = new Image(); image.onload = function() { let canvas = document.createElement('canvas'); canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; // 将图片插入画布并开始绘制 canvas.getContext('2d').drawImage(image, 0, 0); // result let result = canvas.toDataURL('image/png') resolve(result); // CORS 策略,会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror image.setAttribute("crossOrigin",'Anonymous'); image.src = url; // 图片加载失败的错误处理 image.onerror = () => { reject(new Error('图片流异常'));

你可以这样调用:

let imgUrL = `http://XXX.jpg`
this.getDataUri(imgUrL).then(res => {
  // 转化后的base64图片地址
  console.log('base64', res)

2. base64 转 blob

// 原理:利用URL.createObjectURL为blob对象创建临时的URL
base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {
    return new Promise((resolve, reject) => {
      // 使用 atob() 方法将数据解码
      let byteCharacters = atob(b64data);
      let byteArrays = [];
      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        let slice = byteCharacters.slice(offset, offset + sliceSize);
        let byteNumbers = [];
        for (let i = 0; i < slice.length; i++) {
            byteNumbers.push(slice.charCodeAt(i));
        // 8 位无符号整数值的类型化数组。内容将初始化为 0。
        // 如果无法分配请求数目的字节,则将引发异常。
        byteArrays.push(new Uint8Array(byteNumbers));
      let result = new Blob(byteArrays, {
        type: contentType
      result = Object.assign(result,{
        // jartto: 这里一定要处理一下 URL.createObjectURL
        preview: URL.createObjectURL(result),
        name: `图片示例.png`
      resolve(result)

你可以这样调用:

let base64 = base64.split(',')[1]
this.base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {
    // 转后后的blob对象
    console.log('blob', res)

3.blob 转 base64

// 原理:利用fileReader的readAsDataURL,将blob转为base64
blobToBase64(blob) {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        resolve(e.target.result);
      // readAsDataURL
      fileReader.readAsDataURL(blob);
      fileReader.onerror = () => {
        reject(new Error('文件流异常'));

你可以这样调用:

this.blobToBase64(blob).then(res => {
    // 转化后的base64
    console.log('base64', res)

四、三种显示方式,哪种更优雅呢?

url: 一般来说,图片的显示还是建议使用url的方式比较好。如果后端传过来的字段是图片路径的话。

base64:如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为其Base64编码后的字符串非常大,会明显增大HTML页面,影响加载速度。 如果图片像loading或者表格线这样的,大小极小,但又占据了一次HTTP请求,而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了!。

blob: 当后端返回特定的图片二进制流的时候,就像我第一part里的情景再现说的,前端用blob容器接收。图片用blob展示会比较好。

最后编辑于:2019-02-27 16:11