刻录窗口小部件(JavaScript)

此示例演示了所有的使用情况 刻录小部件 plugin.

有关完整功能的详细信息 刻录小部件,审查这一点 刻录窗口小部件UI参考.

点击此处查看工作演示 of the code below.

<html>
<head>
  <!-- Set the viewport width for mobile devices to take advantage of the mobile editor -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  <script src='//bonanzapublic.s3.amazonaws.com/assets/burn_bundle.js'></script>

  <!-- Instantiate burn widget -->
  <script type='text/javascript'>
    var burnWidget = new BONZ.BurnWidget({
      apiKey: 'my Bonanza API developer id',
      userId: 'uniqueId', // A unique id that identifies this user within *your* application
      callback: 'http://requestb.in/1h0v3ci1', // A URL within *your* application that we should POST to when the burn is complete, or when the final mask is selected or changed.
      onIndex: function(jsonResponse) {
        // Callback to be triggered when requesting all burns for this user
        console.log(jsonResponse);
      },
      onShow: function(imageSelector, jsonResponse) {
        // Callback to be triggered after the show/edit burn is popped up
        console.log(imageSelector);
        console.log(jsonResponse);
      },
      onCreate: function(imageSelector, jsonResponse) {
        // Callback to be triggered after a burn is queued/created.
        // We recommend adding your own functionality to save the id and user_id the returned in jsonResponse
        console.log(imageSelector);
        console.log(jsonResponse);
      },
      onSave: function(imageSelector, jsonResponse) {
        // Callback to be triggered after the user selects a final mask
        // We recommend adding your own functionality to save the final_result_url the returned in jsonResponse
        console.log(jsonResponse);
        $(imageSelector).attr('src', jsonResponse.final_result_url);
      },
      onError: function(type, message) {
        // Callback to be triggered if the API action raises an exception
        console.log(type);
        console.log(message);
      }
    });

    function burnImage() {
      // Queues a new burn from the src of the image element
      burnWidget.launch({ image: $('#image1') });
    }
    
    function burnURL(el) {
      // Queues a new burn from a URL
      burnWidget.launch({ url: el.href });
    }
    
    function showBurnByID(id) {
      // Shows the progress of the background burn with the specified id.
      burnWidget.launch({ id: id });
    }
    
    function showBurnByImage() {
      // Gets the id of the background burn from the data-id attribute,
      // and shows the progress of the burn.
      burnWidget.launch({ image: $('#image2') });
    }

    function viewBurns() {
      // Gets all in progress/complete burns for the user identified
      // by the userId parameter when instantiating a new BONZ.BurnWidget.
      burnWidget.launch();
    }
  </script>
</head>
<body>
  <h2>Queue a burn using the <tt>src</tt> attribute of an <tt>img</tt> element.</h2>
  <img id='image1' src='http://url.to.my/image/to/burn' />
  <p><a href='#' onclick='burnImage(); return false;'>Burn image</a></p>
  
  <h2>Queue a burn from a remote URL</h2>
  <p><a href='http://url.to.my/image/to/burn' onclick='burnURL(this); return false;'>Burn URL</a></p>
  
  <h2>View the progress/edit a previously queued image</h2>
  <p>This example shows the progress of the Background Burn with the ID of 1</p>
  <p><a href='#' onclick='showBurnByID(1); return false;'>Show burn by ID</a></p>
  
  <p>This example shows the progress of the Background Burn with the ID of 2</p>
  <img id='image2' src='http://url.to.my/image/to/burn' data-id='2' />
  <p><a href='#' onclick='showBurnByImage(); return false;'>Show burn by image</a></p>
  
  <h2>View all burns for a specific user</h2>
  <p><a href='#' onclick='viewBurns(); return false;'>View all burns</a>.</p>
</body>
</html>