Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
View live sample
Description
This sample demonstrates how to get arraybuffer content from an image or json resource.
This sample shows how to use esriRequest to access ArrayBuffer content. The snippet below demonstrates two different ways to access it:
- via image content
- via json content
The URL for image content automatically defaults to a cached map service tile whereas the json content is taken from an Esri sample server.
Once the content is loaded we can access and display this information. The response argument is a ArrayBuffer object. This is read using the FileReader API. If the response type is an image, the readAsDataURL method is used, otherwise it will readAsText.
XMLHttpRequest objects are subject to the browser same origin security policy. This means that when downloading content with this method you need to setup a proxy if the content is from another origin. The proxy acts as an intermediary between the browser and the server that contains the content you want to download. The proxy is not required if the HTML page and the content are hosted on the same web server or have been enabled for CORS.
Code
<!DOCTYPE html>
<html>
<head>
<title>ArrayBuffer Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
#main {
font-family: "Arial Unicode MS, Arial, sans-serif";
font-size: 24px;
}
#info {
font-size: 16px;
}
#content {
width: 600px;
height: 275px;
padding: 5px;
overflow: auto;
border: solid 2px #AAAAAA;
background-color: #FFFFFF;
border-radius: 5px;
-moz-box-shadow: 0 0 0.5em black;
-webkit-box-shadow: 0 0 0.5em black;
-o-box-shadow: 0 0 0.5em black;
box-shadow: 0 0 0.5em black;
}
.failure {
color: red;
}
#status {
font-size: 12px;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"dojo/dom",
"dojo/on",
"dojo/dom-class",
"esri/request",
"dojo/domReady!"
], function (dom, on, domClass, esriRequest) {
var isImage;
on(dom.byId("rdoJson"), "change", change);
on(dom.byId("rdoImage"), "change", change);
on(dom.byId("submitRequest"), "click", getContent);
function getContent() {
var url = dom.byId("url").value;
var contentDiv = dom.byId("content");
contentDiv.value = "";
domClass.remove(contentDiv, "failure");
dom.byId("status").innerHTML = "Downloading...";
var params = {
url: url,
handleAs: "arraybuffer"
};
if (dom.byId("rdoJson").checked) {
params.content = {
f: "json"
};
} else {
var isImage = true;
}
var requestHandle = esriRequest(params);
requestHandle.then(function (response) {
dom.byId("status").innerHTML = "";
var reader = new FileReader();
reader.addEventListener("loadend", function () {
if (isImage) {
dom.byId("content").innerHTML = "<img src=' " + reader.result + " ' />";
} else {
dom.byId("content").innerHTML = "<div>" + reader.result + "</div>";
}
});
if (isImage) {
//if working with image data
reader.readAsDataURL(new Blob([response], {
type: "image/png"
}));
} else {
reader.readAsText(new Blob([response], {
type: "text/plain"
}));
}
},
function (error) {
domClass.add(dom.byId("content"), "failure");
dom.byId("status").innerHTML = "";
dom.byId("content").innerHTML = "<div>" + error + "</div>";
}
);
}
function change(evt) {
var url;
if (evt.target.id === "rdoJson") {
url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/";
} else {
url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/tile/1/0/0";
}
dom.byId("url").value = url;
}
});
</script>
</head>
<body>
<div id="main">Get <b>ArrayBuffer</b> content using esriRequest.</div>
<div id="info">
<p>This sample demonstrates how to get ArrayBuffer content from an Image or Json resource.</p>
</div>
<p>
Blob content :
<span id="blob_content">
<input type="radio" name="radioGrp" id="rdoImage" checked/>
Blob from Image
<input type="radio" name="radioGrp" id="rdoJson"/>
Blob from Json resource
</span>
<br />
<br />
<input type="text" id="url" size="100" value="https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/tile/1/0/0" readonly/>
<input id="submitRequest" type="button" value="GO" />
<span id="status"></span>
</p>
<h2>Content</h2>
<div id="content"></div>
</body>
</html>