JavaScriptを使用してクロスオリジンから画像の存在をチェックする方法

JavaScriptのImageオブジェクトを使用する方法: JavaScriptのImageオブジェクトを使用して画像を読み込むことで、画像の存在をチェックすることができます。以下はコード例です。

function checkImageExists(url, callback) {
  var img = new Image();
  img.onload = function() {
    callback(true);
  };
  img.onerror = function() {
    callback(false);
  };
  img.src = url;
}
// 使用例:
checkImageExists('https://example.com/image.jpg', function(exists) {
  if (exists) {
    console.log('画像が存在します。');
  } else {
    console.log('画像が存在しません。');
  }
});

fetch APIを使用する方法: fetch APIを使用して画像を非同期に読み込み、レスポンスのステータスコードを確認することで、画像の存在をチェックすることができます。以下はコード例です。

function checkImageExists(url) {
  return fetch(url, { method: 'HEAD' })
    .then(function(response) {
      return response.ok;
    })
    .catch(function() {
      return false;
    });
}
// 使用例:
checkImageExists('https://example.com/image.jpg')
  .then(function(exists) {
    if (exists) {
      console.log('画像が存在します。');
    } else {
      console.log('画像が存在しません。');
    }
  });

これらの方法を使用することで、JavaScriptを介してクロスオリジンから画像の存在をチェックすることができます。適切なURLを指定し、コールバック関数またはPromiseを使用して結果を処理します。