Question

我正在使用Javascript编写一个小型移动应用程序。

我正在调用一个响应一些JSON格式数据的远程API。在该数据中是我需要在我的应用中显示的产品图像的URL。我已经将JSON解析为JS数组，现在有一个包含图像所有URL的数组。当我第一次加载我的应用程序时，我有一个画布，用于显示数组中的第一个图像。我有两个按钮，前一个和下一个。我希望能够使用这些按钮循环浏览图像，方法是使用数组中的URL绘制到画布上。

有什么想法吗？

Answer 1

以下是您正在寻找的内容吗？

＆＃13;

  // Image URLs
  var imageUrls = ['http://emojipedia-us.s3.amazonaws.com/cache/8b/bd/8bbd3405b0a197214e229428c23dbe60.png', 'http://emojipedia-us.s3.amazonaws.com/cache/05/d1/05d1ba284ee1a3bfe4e0f68988baafb9.png', 'http://emojipedia-us.s3.amazonaws.com/cache/99/4c/994c5997c7a509703cc53ec2000bb258.png', 'http://emojipedia-us.s3.amazonaws.com/cache/59/0c/590c832e73a472c416bf9d8bfdd02a4a.png'];

  // Keep track of the index of the image URL in the array above
  var imageShownIndex = 0;

  // Create a canvas
  var canvas = document.createElement('canvas');
  var canvasContext = canvas.getContext('2d');
  canvas.height = 150;
  canvas.width = 150;

  // Create a button that will load the previous image on the canvas when clicked
  var previousButton = document.createElement('button');
  previousButton.innerHTML = 'Previous Image';
  previousButton.onclick = function () {
      // Show images in a cycle, so when you get to the beginning of the array, you loop back to the end
      imageShownIndex = (imageShownIndex==0) ? imageUrls.length-1 : imageShownIndex-1;
      updateImage();
   };

  // Do same for the next button
  var nextButton = document.createElement('button');
  nextButton.innerHTML = 'Next Image';
  nextButton.onclick = function () {
    imageShownIndex = (imageShownIndex == imageUrls.length-1) ? 0 : imageShownIndex+1;
    updateImage();
   };

  document.body.appendChild(previousButton);
  document.body.appendChild(canvas);
  document.body.appendChild(nextButton);
  
  // Show the first image without requiring a click
  updateImage();

  function updateImage() {

    // Create the Image object, using the URL from the array as the source
    // You could pre-load all the images and store them in the array, rather than loading each image de novo on a click
    var img = new Image();
    img.src = imageUrls[imageShownIndex];

    // Clear the canvas
    canvasContext.clearRect(0, 0, 150, 150);

    // After the image has loaded, draw the image on the canvas
    img.onload = function() {
      canvasContext.drawImage(img, 0, 0);
    }

  }

＆＃13;

编辑：或者如果你已经制作了HTML元素，你可以使用JavaScript来控制画布。 E.g：

＆＃13;

<html>
  <body>
    <button id="previous_button" onclick="goToPreviousImage()">Previous Image</button>
    <canvas id="image_canvas" height=150, width=150></canvas>
    <button id="next_button" onclick="goToNextImage()">Next Image</button>
  </body>

  <script>
    var imageUrls = ['http://emojipedia-us.s3.amazonaws.com/cache/8b/bd/8bbd3405b0a197214e229428c23dbe60.png', 'http://emojipedia-us.s3.amazonaws.com/cache/05/d1/05d1ba284ee1a3bfe4e0f68988baafb9.png', 'http://emojipedia-us.s3.amazonaws.com/cache/99/4c/994c5997c7a509703cc53ec2000bb258.png', 'http://emojipedia-us.s3.amazonaws.com/cache/59/0c/590c832e73a472c416bf9d8bfdd02a4a.png'];

    var imageShownIndex = 0;

    var canvas = document.getElementById('image_canvas');
    var canvasContext = canvas.getContext('2d');

    function goToPreviousImage() {
        imageShownIndex = (imageShownIndex==0) ? imageUrls.length-1 : imageShownIndex-1;
        updateImage();
     };

    function goToNextImage() {
      imageShownIndex = (imageShownIndex == imageUrls.length-1) ? 0 : imageShownIndex+1;
      updateImage();
     };
    
    updateImage();

    function updateImage() {

      var img = new Image();
      img.src = imageUrls[imageShownIndex];

      canvasContext.clearRect(0, 0, 150, 150);

      img.onload = function() {
        canvasContext.drawImage(img, 0, 0);
      }

    }

  </script>
</html>

＆＃13;

使用上一个和下一个按钮在javascript中循环显示图像

1 个答案: