专栏首页JS菌如何使用 jq 接收 blob 数据

如何使用 jq 接收 blob 数据

如何使用 jq 接收 blob 数据

⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅

目前 jq 用的人还是挺多的,在一些简单的促销 h5 页面,用 jq 去实现一些简单的功能还是比较方便的。本文展示如何用 JQ 去请求一个 blob 对象的 img 图片并渲染到页面上 ?

默认 jq 的 ajax 对象中的 dataType 无法设置返回资源为 blob 那么就需要手动设置,使其能够最终请求一个 blob 对象

解决办法:

使用原生 XMLHttpRequest

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        handler(this.response)
        console.log(this.response, typeof this.response)
        var img = document.getElementById('img')
        var url = window.URL || window.webkitURL
        img.src = url.createObjectURL(this.response)
    }
}
xhr.open('GET', 'https://httpbin.org/image/png')
xhr.responseType = 'blob'
xhr.send()

这种方法直接使用了原生的 ajax

另外还可以使用 xhr 或 xhrFields 配置来修改返回资源的类型

重写 xhr

jq 的 ajax 方法提供了一个 xhr 属性,可以自由定义 xhr

jQuery.ajax({
    url: 'https://httpbin.org/image/png',
    cache: false,
    xhr: function () {
        var xhr = new XMLHttpRequest()
        xhr.responseType = 'blob'
        return xhr
    },
    success: function (data) {
        var img = document.getElementById('img')
        var url = window.URL || window.webkitURL
        img.src = url.createObjectURL(data)
    },
    error: function () {
    }
})

修改 xhrFields

另外还可以修改 jq 的 ajax 方法中 xhrFields 属性,定义响应类型为 blob

jQuery.ajax({
    url: 'https://httpbin.org/image/png',
    cache: false,
    xhrFields: {
        responseType: 'blob'
    },
    success: function (data) {
        var img = document.getElementById('img')
        var url = window.URL || window.webkitURL
        img.src = url.createObjectURL(data)
    },
    error: function () {
    }
})

本文分享自微信公众号 - JS菌(awesomefe),作者:Oliveryoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 图解尾调用优化

    函数在调用的时候会在调用栈中 push 一个调用帧,每次执行完函数都会逐一弹出调用帧知道所有函数执行完毕,调用栈被清空:

    JS菌
  • 大白话解释作用域和闭包是个啥

    常见的变量作用域就是 静态作用域(词法作用域) 与 动态作用域 。词法作用域注重的是 write-time ,即 编程时的上下文 ,而 动态作用域 则注重的是 ...

    JS菌
  • Vue 匿名、具名和作用域插槽的使用

    Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法。?

    JS菌
  • 死磕 java线程系列之线程池深入解析——未来任务执行流程

    前面我们一起学习了线程池中普通任务的执行流程,但其实线程池中还有一种任务,叫作未来任务(future task),使用它您可以获取任务执行的结果,它是怎么实现的...

    彤哥
  • LeetCode攀登之旅(16)

    【光城知图】 在微信群中交流后,想起了一个创新点,在每篇文章开头放上简短的知识点,这次以linux基础放在前面(后续还有很多干货哦~),如大家所见,我把它命名为...

    公众号guangcity
  • std::string的find问题研究

    一次偶然,发现完全同一份代码,在不同机器上find出现两个不同执行结果,本文旨在研究find的“诡异”行为,找出背后的原因。

    一见
  • NVIDIA Pascal Geforce显卡揭秘

    新一代NVIDIA“帕斯卡”(Pascal)架构显卡即将发布,各种传言也如火如荼,最近网络上流传一张图揭露全新的Geforce X家族,包含了基于GP104的X...

    GPUS Lady
  • 【IoT应用创新大赛】基于TencentOS tiny的 智能 家居总控系统

    ​首先,我要先讲一下概念,在传统的生活方式中呢,我们都是手动打开电器,亲自去检查门有没有关好,亲手去拉窗帘。 而到了现在,我们有了各种各样的智能电器,例如智能电...

    黑白方圆丶
  • 日志聚合工具loki

    Loki是一个水平可扩展,高可用性,多租户的日志聚合系统,受到Prometheus的启发。它的设计非常经济高效且易于操作,因为它不会为日志内容编制索引,而是为每...

    山山仙人
  • 秋招提前批小结(CVTE一面挂、阿里三面挂)

    1.自我介绍 2.有没有做过JavaWeb相关的项目?你觉得难点在哪里呢? 3.你这个博客系统有没有加权限系统?如果被拦截封包获取了账号密码怎么办?(没加,...

    我没有三颗心脏

扫码关注云+社区

领取腾讯云代金券