图片处理成二进制流

文章介绍了如何利用JavaScript中的FileReader和BlobAPI,结合XMLHttpRequest,将图片URL转换为二进制流。提供了一个函数示例,该函数接收图片URL,返回一个Promise,成功时解析为Blob对象。同时,文章还提到了将本地图片文件转换为二进制流的方法。
摘要由CSDN通过智能技术生成

        在前端,可以使用 JavaScript 中的 FileReader 和 Blob API 将图片文件转换为二进制流,以下是一个简单的示例函数:

function convertImageToBlob(imageUrl) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', imageUrl, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`Error fetching image: ${xhr.statusText}`));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

        这个函数接受一个图片 URL 作为参数,返回一个 Promise 对象,最终解析为二进制数据。在函数中,我们使用 XMLHttpRequest 对象发送一个 GET 请求,将响应类型设置为 blob。然后在 onload 事件中,如果请求成功,调用 Promise 的 resolve 方法将响应对象作为结果返回;否则,调用 reject 方法返回一个错误对象。

使用该函数的示例如下:

const imageUrl = 'https://example.com/image.jpg';

convertImageToBlob(imageUrl).then((blob) => {
  // 使用 blob 对象进行后续操作
  console.log(blob);
}).catch((error) => {
  // 错误处理
  console.error(error);
});

        该函数可以用于将在线图片转换成二进制流。如果您需要将本地的图片文件转换为二进制流,可以使用类似的方法,首先获取 <input type="file"> 元素的 File 对象,然后使用 FileReader API 将文件转换为二进制流。

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片的常见存储与读取凡是有以下几种: 存储图片:以二进制的形式存储图片时,要把数据库中的字段设置为Image数据类型(SQL Server),存储的数据是Byte[]. 1.参数是图片路径:返回Byte[]类型: public byte[] GetPictureData(string imagepath) { /**/////根据图片文件的路径使用文件打开,并保存为byte[] FileStream fs = new FileStream(imagepath, FileMode.Open);//可以是其他重载方法 byte[] byData = new byte[fs.Length]; fs.Read(byData, 0, byData.Length); fs.Close(); return byData; }2.参数类型是Image对象,返回Byte[]类型: public byte[] PhotoImageInsert(System.Drawing.Image imgPhoto) { //将Image数据,并保存为byte[] MemoryStream mstream = new MemoryStream(); imgPhoto.Save(mstream, System.Drawing.Imaging.ImageFormat.Bmp); byte[] byData = new Byte[mstream.Length]; mstream.Position = 0; mstream.Read(byData, 0, byData.Length); mstream.Close(); return byData; }好了,这样通过上面的方法就可以把图片Byte[]对象,然后就把这个对象保存到数据库中去就实现了把图片二进制格式保存到数据库中去了。下面我就谈谈如何把数据库中的图片读取出来,实际上这是一个相反的过程。 读取图片:把相应的字段Byte[]即:Byte[] bt=(Byte[])XXXX 1.参数是Byte[]类型,返回值是Image对象: public System.Drawing.Image ReturnPhoto(byte[] streamByte) { System.IO.MemoryStream ms = new System.IO.MemoryStream(streamByte); System.Drawing.Image img = System.Drawing.Image.FromStream(ms); return img; }2.参数是Byte[] 类型,没有返回值,这是针对asp.net中把图片从输出到网页上(Response.BinaryWrite) public void WritePhoto(byte[] streamByte) { // Response.ContentType 的默认值为默认值为“text/html” Response.ContentType = "image/GIF"; //图片输出的类型有: image/GIF image/JPEG Response.BinaryWrite(streamByte); }补充: 针对Response.ContentType的值,除了针对图片的类型外,还有其他的类型: Response.ContentType = "application/msword"; Response.ContentType = "application/x-shockwave-flash"; Response.ContentType = "application/vnd.ms-excel";另外可以针对不同的格式,用不同的输出类型以适合不同的类型: switch (dataread("document_type")) { case "doc": Response.ContentType = "application/msword"; case "swf": Response.ContentType = "application/x-shockwave-flash"; case "xls": Response.ContentType = "application/vnd.ms-excel"; case "gif": Response.ContentType = "image/gif"; case "Jpg": Response.ContentType = "image/jpeg"; }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值