Tumblrの投稿にある画像を無理やり横1280pxにするJavaScript

tumblr_replace_image_url.js

document.addEventListener('DOMContentLoaded', function(){
  // imgタグ一覧を取得
  var _images = document.getElementsByTagName('img');

  // _imagesがオブジェクト(ノードリスト)なので配列に変換する
  var _imagesArray = Array.prototype.slice.call(_images);

  // _imagesArrayをforEachで回す
  // 正規表現にマッチしたら、画像URLの拡張子直前の数字を全部1280に書き換え
  _imagesArray.forEach(function(element, index, array){
    var _src = array[index].src;

    // media.tumblr.com が含まれていて、
    // avatar, asset が含まれておらず、
    // 拡張子が jpg/jpeg/png/bmp である
    // 上記3つを満たしている場合、画像URLを書き換え
    if( /media\.tumblr\.com/.test(_src) && !/(avatar|assets)/.test(_src) && /\.(jpg|jpeg|png|bmp)$/.test(_src) ) {
      _changedSrc = _src.replace( /_\d{1,4}(\.)(jpg|jpeg|png|bmp)$/, '_1280$1$2' );
      array[index].src = _changedSrc; // _srcを書き換えても元の配列の値は変わらない
    }
  });
});

tumblr_replace_image_url_iframe.js

// photoset(iframe)の画像も横1280pxに差し替える
// iframe内の全要素のstyle属性を消すところまではこいつがやってくれる
// iframe内のCSSを調整したい、そもそもiframeのサイズを可変にしたい、などの場合は
// 別途実装の必要アリ


document.addEventListener('DOMContentLoaded', function(){
  // ページ内の画像URLを書き換え
  resizeImages(document);

  // iframe内の画像URLを書き換え
  resizeImagesInIframe();


  function resizeImagesInIframe(){
    // iframeタグ一覧を取得→配列に変換
    var _iframes = toArray(document.getElementsByClassName('photoset'))

    // _iframesをforEachで回す
    _iframes.forEach(function(element, index, array){
      var _arraySrc = array[index].src;

      // photosetのiframeである場合
      if( /photoset_iframe/.test(_arraySrc) ) {
        var _iframeDocument = array[index].contentWindow.document;
        resizeImages(_iframeDocument);

        // style属性全部消す
        var _allElements = toArray(_iframeDocument.getElementsByTagName('*'));
        _allElements.forEach(function(element, index, array){
          array[index].style = null;
        });
      }
    });  
  }


  function resizeImages(documentObject){
    // imgタグ一覧を取得→配列に変換
    var _images = toArray(documentObject.getElementsByTagName('img'));

    // _imagesをforEachで回す
    // 正規表現にマッチしたら、画像URLの拡張子直前の数字を全部1280に書き換え
    _images.forEach(function(element, index, array){
      var _src = array[index].src;

      // media.tumblr.com が含まれていて、avatar, asset が含まれておらず、拡張子が jpg/jpeg/png/bmp である
      // 上記3つを満たしている場合、画像URLを書き換え
      if( /media\.tumblr\.com/.test(_src) && !/(avatar|assets)/.test(_src) && /\.(jpg|jpeg|png|bmp)$/.test(_src) ) {
        _changedSrc = _src.replace( /_\d{1,4}(\.)(jpg|jpeg|png|bmp)$/, '_1280$1$2' );
        array[index].src = _changedSrc; // _srcを書き換えても元の配列の値は変わらない
      }
    });
  }


  function toArray(target){
    return Array.prototype.slice.call(target);
  }
});

解説記事
Tumblrの投稿にある画像を無理やり横1280pxにするJavaScript - Memo/