LEADTOOLS JavaScript(Leadtools)

ImageLoaderオブジェクト。

フレームを表示
サンプル 
メンバ 
URLからHTML、SVGまたは他のXML要素をロードします。
オブジェクトモデル
構文
function Leadtools.ImageLoader() 
解説

ImageLoaderが、長くセットアップcodeを外へ抽出していて、以前でより新しいブラウザの違いをカバーしている間、さまざまな方法でロードイメージにLEADTOOLS全体で使われます。ImageLoaderのための一般的な使用事例は、成功と失敗に関してウェブ安全な画像ファイル(例えばPNG)にコールバックのサポートをロードすることであるでしょう。

UrlModeは、詳細な情報のためのロードされたImageLoaderUrlModeであるimageの型に最も合うためにimageをロードする複数の方法を考慮に入れます)。手短に言えば、ImageLoaderは一般的なimage.srcやり方で、または、ウェブ安全な画像ファイルとSVGイメージのためのAJAXによってイメージをロードすることができます。

ロードプロセスの詳細については、走力を参照します。

サンプル

このサンプルは、現在のブラウザのためにいろいろなLTHelperのプロパティを示します。

「index.html」などの、お気に入りのテキストエディターにこのサンプルをコピーして、ペーストして、任意の名前でディスクの上でフォルダにそれを保存します。そのフォルダの中に、名前「スクリプト」でディレクトリを作成します。「[LEADTOOLSインストールフォルダ]\Bin\JS」から「スクリプト」までサンプルで必須の.jsファイルをコピーします。最後に、先ほど保存したHTMLファイルを、HTML 5をサポートしている任意のブラウザーで開きます。このデモは、ロードするために、イメージのために若干のURLで貼り付けに必要とします。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ImageLoader Example</title>
   <meta charset="utf-8" />
</head>
<body style="margin: 5px; font-family: Arial, Helvetica, sans-serif;">
   <!-- The element used by the imageLoader to do extra loading (hidden) -->
   <div id="imagesHolder" style="visibility: hidden;"></div>

   <h4>Open your browser's developer tools to see how these images differ in the DOM.</h4>
   <h4>You will need CORS-enabled images for AJAX.</h4>
   <!-- Where we want to put our result -->
   <table style="text-align: center;">
      <thead>
         <tr>
            <th></th>
            <th style="width: 250px;">Raster</th>
            <th style="width: 250px;">SVG</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <th>Image Url</th>
            <td id="rasterImageUrl"></td>
            <td id="svgImageUrl"></td>
         </tr>
         <tr>
            <th>Ajax Data Url</th>
            <td id="rasterAjaxDataUrl"></td>
            <td id="svgAjaxDataUrl"></td>
         </tr>
         <tr>
            <th>Ajax Xml</th>
            <td id="rasterAjaxXml"></td>
            <td id="svgAjaxXml"></td>
         </tr>
      </tbody>
   </table>

   <!-- The LEADTOOLS Javascript Libraries -->
   <script src="Scripts/Leadtools.js"></script>

   <!-- Our image loading code -->
   <script type="text/javascript">
      "use strict";
      (function loadImages() {

         // Before the imageLoader is run, we can do what we like.
         function preRun(imageLoader, preRunEventArgs) {
            // Optional: we can set "abort" to true to make the imageLoader fail.
            //preRunEventArgs.cancel = true;
            console.log("ImageLoader about to run: " + imageLoader.url);
         }

         // When we're done, append the image to our page.
         function done(imageLoader) {
            // For this example, we used the tag as a target ID.
            var parent = document.getElementById(imageLoader.tag.parent);
            var textElement = document.createElement("p");
            textElement.innerHTML = (imageLoader.isHTMLImageElement ? "&lt;img&gt;" : "&lt;svg&gt;") + " width: " + imageLoader.width + ", height: " + imageLoader.height;
            parent.appendChild(imageLoader.element);
            parent.appendChild(textElement);
         }

         // If we failed, show the error.
         function fail(imageLoader) {
            var parent = document.getElementById(imageLoader.tag.parent);
            var textElement = document.createElement("p");
            textElement.innerHTML = imageLoader.error;
            parent.appendChild(textElement);
            console.error(imageLoader.error);
         }

         // Do some cleanup, regardless of the result
         function always(imageLoader) {
            imageLoader.preRun.remove(preRun);
            imageLoader.done.remove(done);
            imageLoader.fail.remove(fail);
            imageLoader.always.remove(always);
            // Call dispose at the very end
            imageLoader.dispose();
         }

         document.addEventListener("DOMContentLoaded", function (event) {
            var imagesHolder = document.getElementById("imagesHolder");

            // We will show the results of loading a raster web image and SVG in all three supported loading modes.
            // Insert URLs to raster (GIF, PNG, JPG) and SVG images below. The images must have CORS properties for AJAX.
            var imageRasterUrl = "http://demo.leadtools.com/images/gif/clock.gif";
            var imageSvgUrl = "http://demo.leadtools.com/images/svg/lazio.svg";

            var tags = [
               // Raster images
               { parent: "rasterImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: imageRasterUrl },
               { parent: "rasterAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: imageRasterUrl },
               { parent: "rasterAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: imageRasterUrl },
               // SVG images
               { parent: "svgImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: imageSvgUrl },
               { parent: "svgAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: imageSvgUrl },
               { parent: "svgAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: imageSvgUrl },
            ];

            tags.forEach(function (tag) {
               var imageLoader = new lt.ImageLoader();
               imageLoader.urlMode = tag.mode;
               imageLoader.url = tag.url;

               // If we're loading with AJAX, attach a header or even change to a POST request (endpoint must have proper CORS properties)
               //if (tag.mode === lt.ImageLoaderUrlMode.ajaxDataUrl || tag.mode === lt.ImageLoaderUrlMode.ajaxXml) {
               //imageLoader.ajaxOptions.headers["myKey"] = "myValue";
               //imageLoader.ajaxOptions.method = "POST";
               //imageLoader.ajaxOptions.headers["contentType"] = "application/json";
               //imageLoader.ajaxOptions.postData = JSON.stringify({ key: "value" });
               //}
               imageLoader.preRun.add(preRun);
               imageLoader.done.add(done);
               imageLoader.fail.add(fail);
               imageLoader.always.add(always);

               // Add this object as a tag so we can use it in our callbacks easily
               imageLoader.tag = tag;
               imageLoader.run();
            });
         });
      }());
   </script>
</body>
</html>
参照

参照

ImageLoaderメンバ
Leadtools名前空間