webapi 返回base64图片_c# webapi 根据路径获取图片并转换成base64 - CSDN
精华内容
参与话题
  • using System.IO;.../// WebApi返回图片 /// </summary> public HttpResponseMessage GetQrCode() { var imgPath = @"D:\ITdosCom\Images\itdos.jpg"; //从图片中读取byte ...
    using System.IO;  
    
    /// <summary>  
    /// WebApi返回图片  
    /// </summary>  
    public HttpResponseMessage GetQrCode()  
    {  
        var imgPath = @"D:\ITdosCom\Images\itdos.jpg";  
        //从图片中读取byte  
        var imgByte = File.ReadAllBytes(imgPath);  
        //从图片中读取流  
        var imgStream = new MemoryStream(File.ReadAllBytes(imgPath));  
        var resp = new HttpResponseMessage(HttpStatusCode.OK)  
        {  
            Content = new ByteArrayContent(imgByte)  
            //或者  
            //Content = new StreamContent(stream)  
        };  
        resp.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpg");  
        return resp;  
    }  
    
    
    
    /// <summary>  
    /// WebApi返回json数据  
    /// </summary>  
    public HttpResponseMessage GetQrCode()  
    {  
        var jsonStr = "{\"IsSuccess\":true,\"Data\":\"www.itdos.com\"}";  
        var result = new HttpResponseMessage(HttpStatusCode.OK)  
                        {  
                            Content = new StringContent(jsonStr, Encoding.UTF8, "text/json")  
                        };  
        return result;  
    }  
    
    
    
    /// <summary>  
    /// WebApi返回字符串  
    /// </summary>  
    public HttpResponseMessage GetQrCode()  
    {  
        var str = "IT大师www.itdos.com";  
        var result = new HttpResponseMessage(HttpStatusCode.OK)  
                        {  
                            Content = new StringContent(str, Encoding.UTF8, "text/plain")  
                        };  
        return result;  
    }
    
    
    
    //返回html页面
    public HttpResponseMessage Get(string id)
            {
                if (id.Contains("OID="))
                {
                    id = id.Replace("OID=", "");
                }
                else if (id.Contains("oid="))
                {
                    id = id.Replace("oid=", "");
                }
                else
                {
                    id = "Not Found!";
                }
                string html = getHtml(id);
                var result = new HttpResponseMessage(HttpStatusCode.OK)
                {
                    Content = new StringContent(html, Encoding.UTF8, "text/html")
                };
                return result;
            }
    
    展开全文
  • 经过多方搜索,图片可以用base64这种方式显示(如下代码),所以可以在api接口中把内存流转换base64的字符串 document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0...

    经过多方搜索,图片可以用base64这种方式显示(如下代码),所以可以在api接口中把内存流转换base64的字符串

    document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );
    

    api接口控制器,我这里做的是微信扫码支付的二维码,

              [HttpGet]
            public IHttpActionResult WXPay(int order_id)
            {
                NativePay nativePay = new NativePay();
                string result = nativePay.GetPayUrl(order_id);
                QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
                qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;
                qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.M;
                qrCodeEncoder.QRCodeVersion = 0;
                qrCodeEncoder.QRCodeScale = 4;
    
                //将字符串生成二维码图片
                Bitmap image = qrCodeEncoder.Encode(result, Encoding.Default);
                //保存为PNG到内存流  
                MemoryStream ms = new MemoryStream();
                image.Save(ms, ImageFormat.Png);  
                byte[] arr = new byte[ms.Length];
                ms.Position = 0;
                ms.Read(arr, 0, (int)ms.Length);
                ms.Close();
                return Json( ApiResult.Success( Convert.ToBase64String(arr)));
            }
    

    然后页面获取渲染,ajax我这里是封装了一下,你们自己写就好了,重点是data:image/png;base64

           // 测试微信支付接口
            $.mycore.httpAjax.get($.mycore.apiUrl.WXPay,
                { order_id: id },
                function (res) {
                    var img = res.Message;
                    $("#pay_img").attr("src", "data:image/png;base64,"+img);
                });
    
    展开全文
  • Java BufferImage 转换 Base64 传送至前端

    Java BufferImage 转换 Base64 传送至前端

    首先这是个坑  大坑  

    首先是我这边是生成图片 用Java里面的 画出来的

    然后用的是 BufferImage 这个类 

    我们是动态生成图片 然后把图片转换成base64 发送到web端接受  

    但是坑爹的是 

    转换过程中会出现几个令人帮亏的状况

    1. 在转换成base64是 会在 base64字符串中 自动加上那个 \r\n

    2. 在转换过程中可能图片过大 建议使用jpg 

    3. 在前台接受过程中 因为http不支持中文等  所以会出现两边的 base64不一样  


    下面是我的代码

    Java 后端

    	ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流
            ImageIO.write(png, "png", baos);//写入流中
            byte[] bytes = baos.toByteArray();//转换成字节
            BASE64Encoder encoder = new BASE64Encoder();
            String png_base64 =  encoder.encodeBuffer(bytes).trim();//转换成base64串
            png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
            return png_base64;

    在前端JS 接受的时候需要解一下url

    	decodeURI(data.res_data.png_url)//利用js自带的api 进行解码

    ok 这样就可以直接使用我们传过去的base64 进行图片展示了

    记得要我们传回去的参数前面加上 

     data:image/png;base64, 


    这边需要注意的是 本地和服务器开发不一样 尤其是服务器是在linux环境下  linux java 默认是没有中文的 所以你在 画图的时候是没有中文展现出来 或出现乱码 

    这个时候你需要 去设置java的字体 解决办法 

      http://download.csdn.net/download/flippy/5227161 这个资源太贵了 就是 需要5分

    这样就可以了

    可以按照自己的图片格式进行传参 和头信息  



    展开全文
  • 业务有个需求,要做图片预览上传,过去都是客户端上传给后端,后端返回 url 前端进行预览,现在其实可以不依赖后端做预览,最后在上传,这主要依赖 FileReader 和 FormData 这两个对象和 JavaScript 处理二...

    业务有个需求,要做图片预览上传,过去都是客户端上传给后端,后端返回 url 前端进行预览,现在其实可以不依赖后端做预览,最后在上传,这主要依赖 FileReader 和 FormData 这两个对象和 JavaScript 处理二进制的能力。

    OK,Show code~,以下代码已注释掉具体业务逻辑和实现,如果需要了解 API 细节,可以请参考:

    监听表单文件变化

    文件表单的样式主要通过让它后面,通过别的DOM来美化它。

    <input type="file">
    input.on.('change', preview);

    预览

    预览使用 FileReader 对象来读:

    function preview(e) {
        var file = e.target.files[0];
        var reader = new FileReader();
    
        reader.onloadend = function () {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
            var dataURL = reader.result;
            var img = new Image();
            img.src = dataURL;
            // 插入到 DOM 中预览
            // ...
        };
    
        reader.readAsDataURL(file); // 读出 base64
    
    }

    提交图片文件(二进制文件 非 base64)

    base64 转 二进制文件

    /**
     * dataURL to blob, ref to https://gist.github.com/fupslot/5015897
     * @param dataURI
     * @returns {Blob}
     */
    function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {type: mimeString});
    }

    构造 FormData 填充二进制文件数据,通过 ajax 的方式进行提交:

    var fd = new FormData();
    var blob = dataURItoBlob(dataURL);
    fd.append('file', blob);
    
    
    $.ajax({
        type: 'POST',
        url: '/upload',
        data: fd,
        processData: false, // 不会将 data 参数序列化字符串
        contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log('进度', percentComplete);
                }
            }, false);
    
            return xhr;
        }
    }).success(function (res) {
        // 拿到提交的结果
    }).error(function (err) {
        console.error(err);
    });

    注意:不要漏了指定 processData 和 contentType 为 false 。

    压缩

    业务中不需要前端不需要压缩,因为后端有更靠谱的压缩方案,但是前端其实也可以压缩,那就是用 canvas 把图画出适合的大小,然后上传。

    主要流程:

    • 在 new 出来的 Image 对象,我们监听它的 onload 事件
    • 按照压缩比例,算出压缩后的图片尺寸
    • 创建 canvas ,尺寸设置成上一步骤算出来的压缩后的图片尺寸
    • 调用 drawImage 方法,把图片绘制到 canvas 中
    • 调用 canvas 的 toDataURL ,取出 base64 格式的数据
    • 后续的传图步骤和上面的原图上传一样
    var img = new Image();
    
    img.onload = function () {
        // 当图片宽度超过 400px 时, 就压缩成 400px, 高度按比例计算
        // 压缩质量可以根据实际情况调整
        var w = Math.min(400, img.width);
        var h = img.height * (w / img.width);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
    
        // 设置 canvas 的宽度和高度
        canvas.width = w;
        canvas.height = h;
    
        // 把图片绘制到 canvas 中
        ctx.drawImage(img, 0, 0, w, h);
    
        // 取出 base64 格式数据
        var dataURL = canvas.toDataURL('image/png');
    
        // ...
    };
    
    img.src = reader.result;

    自己的 OneWord 客户端的上传组件就是这么做的: ow-image-uploader.vue

    这样一看,好像除去业务逻辑的话,好像也没多少代码

    PS:需要注意的是,通过 canvas 绘制的图片,低版本 IOS 会出现比例不正确的情况,请参考 https://github.com/stomita/ios-imagefile-megapixel

    展开全文
  • [Web API] 如何让 Web API 统一回传格式以及例外处理 前言 当我们在开发 Web API 时,一般的情况下每个 API 回传的数据型态或格式都不尽相同,如果你的项目从头到尾都是由你一个人独力完成,那也许还可以...
  • 有时候我们通过API接口获取图片时,拿到的是图片的数据流:有可能是二进制数据流,也可能是base64编码的数据流。 data: { captchaImage: '../../images/captcha.png', // 如果需要的话,可以给张默认的图片先 }, ...
  • Springboot 文件上传(base64方式)

    千次阅读 2018-12-29 11:34:27
    使用场景: 对于互联网项目,基本都会采用分布式的文件存储方式,比如fastdfs, 保证高用户量的时候 文件操作效率(上传,读取)。...针对上述场景,可以考虑使用base64的方式存储。代码如下: import io.swagge...
  • Java实现头像拖拽截取裁剪后图片保存,获取的是base64数据,base64数据转换为图片后存入到数据库。并读取出来。1.操作过程效果截图: 点击编辑头像进入头像上传页面 头像上传页面 点击选择图片,选择需要上传的图片...
  • Web端人脸识别登录

    万次阅读 多人点赞 2018-12-27 16:58:12
    人脸识别技术在当下已经十分成熟,但主要在移动端应用上较为普及,而在Web端并不多见。 本文介绍在Web端人脸识别的简单实现。 Web端人脸识别主要有三个技术思路:1.前端的人脸识别,例如使用Tensorflow.js,2.后台...
  • 在用webapi中做上传图片和MVC和一般处理程序还不一样,后台老是拿不到前台传递的数据,之前用一般处理程序和MVC就没遇到这种情况,经过几天的查询资料,今天终于实现了,利用的是Base64编码传输,后端接受Base64的...
  • WebApi利用ActionFilterAttribute重新封装返回结果先创建要返回的结果类型: /// &lt;summary&gt; /// 返回类型 /// &lt;/summary&gt; public class ApiResultModel { private HttpStatusCode ...
  • SpringMVC返回图片的几种方式

    万次阅读 2018-01-19 09:36:10
    SpringMVC返回图片的几种方式 后端提供服务,通常返回的json串,但是某些场景下可能需要直接返回二进制流,如一个图片编辑接口,希望直接将图片返回给前端,此时可以怎么处理? I. 返回二进制图片 主要...
  • ASP.NET MVC ApiController过滤器处理返回结果
  • webapi上传图片的两种方式

    万次阅读 2016-07-05 16:10:56
    ///  /// App上传图片  ///  /// 返回上传图片的相对路径  [HttpPost]  public AppReturn UploadImage()  {  AppReturn rModel = new AppReturn();  //
  • 图像识别部分接口Java-API调用示例代码 https://gitee.com/xshuai/ai/不是完整的web项目大家没必要下载运行。复制|下载相关代码即可 准备工作 已经创建了图像识别应用并且拿到apikey sercetkey得到AccessToken代码...
  • 2.在管理中心创建应用及查看相关参数 AppID APIKey SecretKey都需要保存起来 3.测试  3.1、调用百度云人脸识别API需要两步 1、首先根据创建的应用,获取token,该token有效期为1个月;  token的授权服务地址
  • 关于guzzleHttp的基础操作

    万次阅读 2018-05-11 14:32:41
    Guzzle是一个PHP的HTTP客户端,用来轻而易举地发送请求,并集成到我们的WEB服务上。Guzzle有许多特点,这里引用官网上的介绍接口简单:构建查询语句、POST请求、分流上传下载大文件、使用HTTP cookies、上传JSON数据...
  • 自行百度。再此,使用的是阿里云的人脸识别。传送门:https://market.aliyun.com/products/57124001/cmapi010401.html?spm=5176.730005.0.0.xszo5M#sku=yuncode440100000注册号帐号去购买阿里云的人脸识别服...
  • 【1】HttpContext获取http请求 HttpContext context = HttpContext.Current; 在业务层需要取得当前页面层的Session,Request,Response,Server时可以通过 Http.Current来获得 ... 【2】 判...
  • **实现原理:**页面javaScrip通过atob函数将服务端获取的base64编码转换为pdf文件对象,使用pdf.js API加载到页面元素,转为png图片Base64编码,调用LODOP控件预览打印或直接打印。 **运行环境:**Firefox,IE,...
1 2 3 4 5 ... 20
收藏数 17,286
精华内容 6,914
关键字:

webapi 返回base64图片