vue 怎么解析 二进制 为图片

你可以使用Blob对象来解析二进制为图片。具体实现方法可以通过以下代码实现：

function binaryToImage(binaryData) {
  // 将二进制数据转换为Blob对象
  const blob = new Blob([binaryData], { type: 'image/jpeg' });
  // 新建一个Image对象来加载Blob对象中的数据
  const img = new Image();
  img.src = URL.createObjectURL(blob);
  // 返回Image对象
  return img;
}

在上述代码中，我们首先将二进制数据转换为Blob对象，然后利用URL.createObjectURL()方法将Blob对象中的数据转换为URL，接着创建一个新的Image对象，将该URL赋值给Image对象的src属性，最终返回该Image对象即可。

相关问题

vue将二进制转为图片保存本地

在Vue中，要将二进制数据转换为图片并保存到本地，可以按照以下步骤进行：

1. 首先，确保需要将二进制数据转换为图片的二进制数据已经成功获取到，并保存在一个变量中。

2. 使用Blob对象将二进制数据转换为一个可以直接使用的URL。Blob对象可以通过传递一个包含二进制数据和类型的数组来创建。例如，可以使用以下代码创建一个Blob对象：

const blob = new Blob([binaryData], { type: 'image/png' });

其中，`binaryData`是包含二进制数据的变量，`image/png`表示图片的类型。

3. 将Blob对象转换为URL。可以使用`URL.createObjectURL()`方法将Blob对象转换为URL。例如：

const imageUrl= URL.createObjectURL(blob);

其中，`imageUrl`是保存了二进制数据转换后的图片URL。

4. 创建一个<a>标签用于下载图片。可以在Vue中使用一个<a>标签，设置它的href属性为图片的URL，设置download属性为图片的文件名。例如：

<a :href="imageUrl" download="image.png">下载图片</a>

其中，`:href`表示绑定的URL，`download`表示下载时文件名。

5. 当用户点击下载链接时，图片将被保存到本地。

以上就是在Vue中将二进制数据转换为图片并保存到本地的简单过程。需要注意的是，保存图片到本地通常需要用户进行操作，并且浏览器的设置可能会限制或阻止此操作。因此，在实际使用时，需要根据浏览器的限制和用户的要求做进一步处理。

vue将二进制流转成图片

在Vue中将二进制流转成图片可以通过创建Blob对象和URL.createObjectURL()方法实现。下面是一个简单的示例代码：

<template>
  <div>
    <img :src="imgUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: ''
    }
  },
  methods: {
    // 二进制流转成图片
    convertBinaryToImg(binary) {
      const blob = new Blob([binary], {type: 'image/png'}) // 创建Blob对象
      this.imgUrl = URL.createObjectURL(blob) // 转成图片url
    }
  },
  mounted() {
    // 模拟二进制流
    const binary = new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,100,0,0,0,100,8,6,0,0,0,141,100,38,205,0,0,0,9,112,72,89,115,0,0,7,26,0,0,7,26,1,0,154,156,24,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,0,9,112,73,68,65,84,120,218,237,157,79,108,195,96,20,134,207,239,111,219,35,169,36,130,76,169,10,18,69,73,137,10,138,106,92,72,5,115,37,189,66,235,216,214,122,47,108,98,28,56,167,25,65,46,200,218,210,53,168,150,7,208,156,244,112,102,131,99,48,9,179,174,17,253,174,43,97,205,99,105,117,85,147,186,231,246,123,238,123,247,155,242,36,187,234,41,8,15,219,92,20,247,8,7,194,204,23,192,49,10,0,96,22,194,8,0,128,1,3,0,2,0,128,8,96,2,0,0,0,0,73,69,78,68,174,66,96,130]) // png格式的二进制流
    this.convertBinaryToImg(binary) // 转成图片
  }
}
</script>

在上面的代码中，我们模拟了一个png格式的二进制流，并且将其转成了图片。我们可以根据自己的实际需求来替换二进制流。