如何使用 $.ajax 将图像 src 设置为动态图像/png 数据?

2023-12-07

图像是通过一些用户输入参数动态生成的。我能够通过以下方式成功生成图像GET,通过写信给Response.OutputStream

$('#myImage').attr('src', 'Images/GetImage?param1=value1&param2=value2');

还有几个附加参数。但是,我怎样才能做到这一点POST?我想我可以用$.ajax和base64编码Image,但效果不太好。

$.ajax({
    url: 'Images/GetImage64',
    type: 'POST',
    data: { param1: 'value1', param2: 'value2' },
    success: function (data) {
        //$('#myImage').attr('src', data); 
        $('#myImage').attr('src', 'data:image/png;base64, ' + data);
    }
});

Chrome 开发工具显示 ajax (XHR) POST 到 /Images/GetImage64 并带有文本/纯文本响应。内容看起来像服务器上生成的 PNG。然而,另一个“其他”请求是通过下面的 URL 发出的,我不知道发生了什么

data:image/png:base64, [binary]

在服务器上,我返回一个ImageResult : ActionResult覆盖ExecuteResult并使用 Base64 编码图像进行响应。

public override void ExecuteResult(ControllerContext context)
{
    context.HttpContext.Response.Clear();
    context.HttpContext.Response.ContentType = "text/plain";
    context.HttpContext.Response.BinaryWrite(GetBase64Image(Image));
}

可能是 jQuery 的错。尝试强制 jQuery 将结果视为纯文本dataType: 'text':

$.ajax({
    url: 'Images/GetImage64',
    type: 'POST',
    dataType: 'text',
    data: { param1: 'value1', param2: 'value2' },
    success: function (data) {
        $('#myImage').attr('src', 'data:image/png;base64,' + data);
    }
});

编辑:没关系,不是吗。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 $.ajax 将图像 src 设置为动态图像/png 数据? 的相关文章

随机推荐

  • 如何使用 SharpSVN 访问预提交挂钩中的文件信息

    总的来说 我对 SharpSVN 和 SVN 很陌生 我正在尝试实现一个预提交挂钩 当用户提交某种类型的 XML 文件时 在允许提交文件之前 我需要拦截该文件并对其进行分析 以确保它们包含某些元素 由于 SVN 似乎提交了两个参数 存储库路
  • 获取具有特定时间的 Date() 对象

    我想获取一周的开始日期 我能够获取日期 只是返回的日期具有当前系统时间的时间 例如 如果现在是 19 20 我得到的周开始日期为日期 2012 年 3 月 26 日星期一 19 20 16 GMT 0530 IST 为了准确计算 我需要时间
  • React js从父组件更改子组件的状态

    我有两个组件 父组件我想从中更改子组件的状态 class ParentComponent extends Component toggleChildMenu render return div div
  • SwiftUI显示gif图像

    swiftUI中显示动画gif图片的方法 因为图像 Image fall leaves 不支持gif 回答如下 在 swiftUI 中显示 gif 图像的最简单 最快的方法是使用Preview QuickLook QL QLPreviewV
  • 在sql中生成随机名称

    我有 5 个男性和女性的随机名字 我需要根据性别插入随机名称 但是我们如何在 SQL 中从一组 5 个名称中随机插入名称 是否可以 select name from table order by newid
  • JSF 中组件的水平放置

    应该很简单 但我找不到答案 我想水平放置组件而不是垂直放置 我想要实现的是一个丰富的 具有 2 行或更多行的工具栏 我一直在尝试使用具有面板网格和两个面板组的工具栏来做到这一点 如下所示
  • 如何让窗口绝对置顶?

    我用设置窗口位置api 使用 HWND TOPMOST 参数使我的窗口位于最顶层 它工作正常 但工具提示仍然位于其之上 如何让我的窗口位于所有窗口之上 我缺少一个 api 吗 Edit 我用计时器检查前景窗口然后将我的窗口设置为最上面来修复
  • Ramda:通过与另一个数组中的每个项目进行比较来从数组中获取对象

    我有一个像这样的数组 ids 1 3 5 和另一个数组 例如 items id 1 name a id 2 name b id 3 name c id 4 name d id 5 name e id 6 name f 我想要的是另一个数组
  • Mavericks 安装后 Sublime Text 2 命令行无法运行

    我已经准备好通过 Stack Overflow 上的其他线程 尽管我付出了努力 但问题似乎并未解决 自从安装 OS X Mavericks 以来 我无法从命令行打开 Sublime Text 2 我尝试遵循以下准则 http benkwok
  • 自定义将结构解组为切片映射

    我以为我现在已经理解了解组 但我想还没有 我在用 Go 解组地图时遇到了一些麻烦 这是我到目前为止的代码 type OHLC RESS struct Pair map string Candles Last int64 json last
  • 在发布到服务器之前如何正确地将文件附加到 formData?

    我一直在关注这个FormData 教程在这里 但尚未了解如何表单数据对象 works 我的输入表格
  • 运行时错误 287 - 设置 Inspector.wordeditor 时的 Outlook

    Set oApp CreateObject Outlook Application Set oMailItem oApp CreateItem 0 oMailItem BodyFormat olFormatRichText Set oIns
  • 对 Amazon Alexa Skill Kit (ASK) Lambda 交互进行故障排除

    我从 ASK 开发开始 我对某些行为有点困惑 我想知道如何从 服务模拟器 控制台调试错误 我怎样才能获得更多关于The remote endpoint could not be called or the response it retur
  • C++17 可选树,错误:不完整类型的无效使用

    当我编译包含可选类型的二叉树时 include
  • 无法添加或更新子行,外键约束失败[重复]

    这个问题在这里已经有答案了 1452 无法添加或更新子行 外键约束失败 projectphp1707 sql e6c cd 约束 sql e6c cd ibfk 1外键 order id 参考tbl order order id table
  • javascript更改点击时的背景颜色[关闭]

    Closed 这个问题需要多问focused 目前不接受答案 你能告诉我 Javascript 吗 它允许你将页面的背景颜色更改为另一种颜色 例如 我有蓝色背景颜色 我想将其更改为绿色 当用户按下触发事件的按钮时 必须更改颜色 我看到它存在
  • 访问 Outlook ost 文件

    我已经看到了 pst 和 ost 文件之间的区别 目前正在通过下面给出的代码访问 Outlook pst 文件 有没有办法使用相同的代码来访问 ost 文件 有人可以向我推荐这个吗 private DataTable GetInboxIte
  • JPA - 保持一对多关系

    也许这是一个愚蠢的问题 但它困扰着我 我有员工与车辆之间的双向一对多关系 当我第一次在数据库中保留一个员工 即它没有分配的 ID 时 我还希望保留其关联的车辆 目前这对我来说效果很好 除了我保存的车辆实体没有自动映射关联的员工 并且在数据库
  • PHP 通过周数获取一周的开始和结束日期

    我见过这个问题的一些变体 但我相信这个问题还没有得到解答 我需要获取一周的开始日期和结束日期 按年份和周数 而不是日期 选择 example input getStartAndEndDate week year output return
  • 如何使用 $.ajax 将图像 src 设置为动态图像/png 数据?

    图像是通过一些用户输入参数动态生成的 我能够通过以下方式成功生成图像GET 通过写信给Response OutputStream myImage attr src Images GetImage param1 value1 param2 v