如何显示二进制流的图片(利用img控件)

原创 2016年06月11日 08:47:09

之前在http://www.cnblogs.com/JsonZhangAA/p/5568575.html博文中是利用的image控件来显示的二进制流图片,我现在想的是能

通过普通的<img id="xx" src="xx"/>这种形式来显示我的二进制流图片吗?必须可以(◑▽◐),就是写法稍微麻烦了一点,img要写成这个样子:

,对你看的没错,它的地址指向了一个aspx页面,这个页面有个奇特之处,

就是我们新建后,不用写任何前台代码,WebForm1前后台代码如下:

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="显示爬虫所爬的数据库中的图片.WebForm1" %>

后台代码:

复制代码
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using 显示爬虫所爬的数据库中的图片.Models;

namespace 显示爬虫所爬的数据库中的图片
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int id = int.Parse(Request["id"].ToString());
            DataClasses1DataContext db = new DataClasses1DataContext();
            Response.ContentType = "application/binary;";
            //这个地方图片可以从数据库中读取二进制图片  
            //byte[] img = DBHelper.ReadImg();  
            byte[] img = db.pictureUrl.Where(p=>p.Id==id).First().pictureUrl1.ToArray();
            Response.BinaryWrite(img);

            Response.Flush();
            Response.End();  
        }
    }
}
复制代码

我们主页面的前后台代码如下:

前台:

复制代码
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <%foreach(var item in ViewBag.Pictures) %>
        <%{ %>
             <img src="WebForm1.aspx?id=<%:item.Id %>" />
        <%} %>
    </div>

</body>
</html>
复制代码

后台代码:

复制代码
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
using 显示爬虫所爬的数据库中的图片.Models;

namespace 显示爬虫所爬的数据库中的图片.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        DataClasses1DataContext db = new DataClasses1DataContext();
        public ActionResult Index()
        {
            ViewBag.Pictures = db.pictureUrl;
            return View();
        }
    }
}
复制代码

最后运行的结果:

前端将图片二进制流显示在html端

工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示: 实...
  • doulinxu
  • doulinxu
  • 2017年03月02日 19:57
  • 12757

ajax请求二进制流图片并渲染到html中img标签

说明后台返回图片二进制流,需要使用get请求获取返回结果,并且将返回的二进制流以图片形式显示在页面img中。 但是日常显示图片都诸如这种形式:以上需求不能将后端地址直接填入src(原因是需要获取图片...
  • qq_29287973
  • qq_29287973
  • 2017年10月26日 16:35
  • 3390

android内嵌页中使用<img>后面的图片是一大串数据流形式显示

大家都知道显示图片有三种方式: 1.显示本地图片 2.显示网络上的图片,不过网络上的图片就是需要每次都去加载,可能会费流量 3.下面这种就是我们今天所要讲的第三种方式显示图片,它其实也就是根据http...
  • qq_30552993
  • qq_30552993
  • 2015年12月10日 17:20
  • 1460

页面从后台接口获取数据流显示照片

JSP页面: 页面上接收数据流可以用标签的“href”属性接收,也可以用标签的“src”属性接收。 查看详情 (target="_blank",在新的标签页中打开) 接口: @RequestM...
  • Fasure_Smile
  • Fasure_Smile
  • 2016年11月03日 15:58
  • 3201

Java 将图片转二进制再将二进制转成图片

import java.awt.image.BufferedImage;       import java.io.ByteArrayInputStream;       import java....
  • linwei_hello
  • linwei_hello
  • 2015年03月25日 17:31
  • 12298

图片转二进制——各种方法汇总

使用Base64转换图片      利用Base64实现二进制和图片之间的转换,具体代码如下: import java.awt.image.BufferedImage; import java.io....
  • hh12211221
  • hh12211221
  • 2017年07月07日 11:41
  • 646

图片转换成二进制流

  • 2013年08月16日 17:56
  • 965B
  • 下载

图片二进制流

  • 2008年04月24日 14:04
  • 64KB
  • 下载

读取远程图片的二进制流

获取图片的二进制流方法很多,file_get_contents,fread,readfile,curl等 1、curl function httpDownload($url){ if(...
  • muzi187
  • muzi187
  • 2017年02月22日 15:40
  • 1493

个人笔记--img、文件流

在做具体的二维码生成过程中,使用文件流的方式,在页面接收显示,并且下载,自己的一些小感悟,准确说是小心得 1.在页面显示,第一步仅仅显示 response.setContentType("image/...
  • xiaodaiye
  • xiaodaiye
  • 2016年03月04日 14:38
  • 1182
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何显示二进制流的图片(利用img控件)
举报原因:
原因补充:

(最多只允许输入30个字)