LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

ここでは、LEADTOOLS HTML5画像ビューワで画像を表示する手順について説明します。

  1. 新しいHTMLファイルを作成して、そして、下記でそれdisplay.htmlとコピーを名前をつけますファイルへのHTML5テンプレート:

    
                 <!DOCTYPE html>
                 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
                 <head>
                    <meta charset="utf-8" />
                    <title>LEADTOOLS Demo</title>
                    <!-- LEADTOOLS Libraries -->
                    <script type="text/javascript" src="lib/Leadtools.js"></script>
                    <script type="text/javascript" src="lib/Leadtools.Controls.js"></script>
                    <script type="text/javascript" src="app.js"></script>
                 </head>
                 <body>
                    <!-- DIV to use as the container for the LEADTOOLS image viewer -->
                    <div id="imageViewerDiv" style="width: 600px; height: 600px; background-color: darkgray"></div>
                 </body>
                 </html>
                 
    
  2. htmlと同じ場所で名をつけられるlibフォルダを作成して、LEADTOOLS JavaScriptファイルをこのフォルダへコピーします。これらのファイルは、「<LEADTOOLS_INSTALLDIR>\Bin\JS」で見つかります:

    
                 Leadtools.js
                 Leadtools.Controls.js
                 
    

    HTMLは、アプリケーションでLEADTOOLS JavaScript画像ビューアーを使用するために必要な最小限のcodeを格納します。Leadtools.jsLEADTOOLS JavaScriptサポートの中核で、他の全てのライブラリによって必要とされます。Leadtools.Controls.js画像ビューワを格納します。両方とも、HTMLの先頭のセクションに追加されます。次に、ビューワのためのコンテナの働きをするために、HTML DIV要素を作成しました。

    作成するapp.js次は、ビューワを作成して、使うために、JavaScript codeをとても格納します。

  3. 同じことでフォルダdisplay.htmlを呼び出されるapp.jsテキストファイルを作成して、それに以下のcodeを追加します:

    
                 window.onload = function () {
                    // Get the container DIV
                    var imageViewerDiv = document.getElementById("imageViewerDiv");
                    // Create the image viewer inside it
                    var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
                    var imageViewer = new lt.Controls.ImageViewer(createOptions);
                    // Add handler to show an alert on errors
                    imageViewer.itemError.add(function (sender, e) {
                       alert("Error loading " + e.data.srcElement.src);
                    });
                    // Load an image in the viewer
                    imageViewer.imageUrl = "http://demo.leadtools.com/HTML5/images/pngimage.png";
                 };
                 
    
  4. それをテストするためにHTML5をサポートするブラウザにおけるページを起動します。