Retrieve Image/png using an Extjs ajax request

Hello, I am currently working on an application that is designed to showcase dynamically generated images stored on a server. The process involves fetching the image, typically in PNG format, using an Ajax Request. The data retrieved appears as follows:

    "PNG


    IHDRLXxs
    sBIT|d pHYsaa?i IDATxw|U~{BI(H/4AaeQQp>n]Wݯ"W?~tuuW]""R)RBI w~;)7   Iя.................................
..........................................."

This data is structured similar to what you see in the PNG specifications.

Within my application, I have a Text:image element where I aim to display the image, but I am unsure of the proper method to do so. Can anyone provide guidance on this?

Below is the code snippet for the Ajax request:

Ext.Ajax.request({
url: 'http://localhost/my_url/you_dont_need_to_know_this',
success: function(response){                
    //img.setData(response.responseText); //img is a Ext:image component.
    debugger;
},
scope: this

});

javascriptajaximageextjs

Answer №1

When your server sends back image data, handle it like this:

Ext.Ajax.request({
    binary: true,  //making use of binary data
    url: 'http://example.com/my_image_endpoint',
    success: function(response) {
        var blob = new Blob([response.responseBytes], {type: 'image/jpeg'}),
        url = window.URL.createObjectURL(blob),
        img = document.createElement('img');
        img.src = url;

        //perform actions with the img element
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Htmlunit driver encounters difficulty executing Javascript

Recently, I switched my Selenium test from using FirefoxDriver to HtmlunitDriver in Java. The test was running smoothly in the Firefox browser but encountered an issue when I made this change: driver = new FirefoxDriver(); to driver = new HtmlUnitDriver ...

javascriptseleniumselenium-webdriverhtmlunithtmlunit-driver

Troubleshooting MySQL through PHP for errors

I've developed a comment posting system where users can write and submit comments using PHP, MySQL, jQuery, AJAX, and JSON. However, I encountered an issue with JSON insertion while debugging the system with Firebug. The error message displayed was: ...

phpjquerymysqlajaxjson

Customize your WooCommerce checkout experience with radio buttons that automatically calculate a percentage fee depending on the subtotal of selected items

I am currently working on integrating a warranty option into the woocommerce checkout process. The code provided below is functional for static price values. // Part 1 - Display Radio Buttons add_action( 'woocommerce_review_order_before_payment', ...

phpajaxwordpresswoocommercefee

What is the best method to include spacing between strings in an array and then combine them into a csv-friendly format?

The method I am currently employing involves the following: var authorsNameList = authors.map(x => x.FirstName + ' ' + x.LastName); Yet, this generates an outcome similar to this: Bob Smith,Bill Jones,Nancy Smith Nevertheless, the desired ...

javascripttypescript

Is the branch of ExtJS 4.1 TreeStore lazy loading extending?

I am working on implementing lazy loading of tree branches in an MVC application using extjs4.1. The branches are located on different URLs and I have faced several challenges along the way. Unfortunately, at this point, the branching functionality is not ...

javascriptextjsextjs4.1

What could be the reason for a jQuery script failing to execute when included in a PHP include statement from a different PHP page?

I'm currently working with javascript and php to manage cookies across different pages. On one page, I have a script that sets a value in a cookie variable and I want to retrieve that value on another page. Let's say the first page is named page1 ...

javascriptphpjqueryhtml

Leveraging a JSON file as a data repository for chart.js

I am struggling to incorporate JSON values into a bar chart. I have successfully logged the JSON data in the console, but I'm unsure how to include it in the data property for the chart. Below is the source JSON... {time: "2016-07-03T21:29:57.987Z" ...

javascriptjqueryjsoncharts

Execute angular.js as a callback function, such as within a $.ajax call

In developing my app, I am primarily working with two key JavaScript files: resources_loader.js and app.js. The role of resources_loader.js is to load some JSON files that are utilized by app.js. However, the issue arises when considering the sequence in ...

javascriptangularjsyepnope

How can I successfully add an element to a nested array without making any mistakes in saving it?

Hello everyone, I'm new here. I previously posted about a similar issue, but now I have a different one. I am encountering this object: singleChat = [ { "chatid": 10000414, "connected": true, "index": 0, ...

javascriptjqueryarrays

Managing the rendering of charts in Angular with Directives

I'm in the process of creating an admin page with multiple elements, each revealing more information when clicked - specifically, a high chart graph. However, I've encountered a challenge with the rendering of these charts using a directive. Curr ...

javascripthtmlangularjs

Can an XSS attack occur on a style tag with inline styling?

For example: <!DOCTYPE html> <html lang="en"> <head> <title>Test for Potential XSS Attack</title> <style> div { background-color:blue; height:120px; ...

javascripthtmlxss

Content will not render when JavaScript generates SVGs

As I delve into the world of JavaScript and SVG to create interactive graphics for a website, I've run into a puzzling issue with programmatically generated SVG paths not being drawn. Below is a sample code that highlights this problem: <!DOCTYPE ...

javascripthtmlsvg

What causes parseInt to transform a value into infinity?

Here is what I'm working on: let s = '50'; let a = parseInt(s); console.log(a); //outputs 50 console.log(_.isFinite(a)); //outputs false I'm curious why parseInt turns 'a' into infinity when 'a' is set to 50? ...

javascriptjqueryunderscore.jsparseint

Can a shell script determine if JavaScript is being executed in the Firefox browser?

On the same machine, I've put together an HTML page with JavaScript, a PHP file, and a shell script. When I run the shell script, it opens the HTML page with Firefox. After the JavaScript has completed its tasks, it will then send a POST request to a ...

phpjavascriptshell

retrieve a string from a given array

I need to retrieve a string from an array in vue and display it on the screen. Here is the method I created for this purpose: displayFixturesName() { const result = this.selectedFixture.toString(); document.getElementById(& ...

javascriptvue.js

The React OnClick and onTouchStart event handlers are functioning properly on a desktop browser's mobile simulator, but they are not responsive when

I added a basic button tag to my next.js main page.js file that triggers an alert when clicked. Surprisingly, the onClick function is functional on desktop browsers but fails to work on any mobile browser. "use client"; export default function P ...

javascriptreactjsnext.jsonclickontouchstart

Typescript - unexpected behavior when using imported JavaScript types:

I am struggling with headaches trying to integrate an automatically generated JavaScript library into TypeScript... I have packaged the JavaScript library and d.ts file into an npm package, installed the npm package, and the typings modules in the TypeScr ...

javascripttypescriptnpmtypescript-typingstype-declaration

Exploring the World of 3D Rotation with Three.js

I currently have 2 mesh objects - the Anchor and the Rod. The Anchor rotates around the z-axis, as shown in the image. The Rod is designed to only move backward and forwards. You can view the image here: . However, I am struggling to determine the matrix ...

javascriptmatrixrotationthree.js

Every time I switch views using the router in vue.js, my three.js canvas gets replicated

After creating a Vue.js integrated with three.js application, I encountered an issue with the canvas getting duplicated every time I opened the view containing the three.js application. The canvas remained visible below the new view, as shown in this image ...

javascriptvue.jsvuejs2three.jsvue-router

Dual Image Flip Card Effect for Eye-Catching Rotations

In the process of enhancing a website, I am interested in incorporating a feature that involves multiple cards with both front and back sides (each containing separate images). Initially, the plan is to display only the front side of the card. Upon clickin ...

javascripthtmlcssfrontend