Image to data URI converter

tokyo_2020 by tokyo_2020 2017-11-05 [2017/11/05 21:34:09]

クリックで、jpg、gif、pngなどをデータURIスキームに変換します。

    • 
  
  • /*
 * @title Image to data URI converter
 * @description クリックで、jpg、gif、pngなどをデータURIスキームに変換します。
 * @include http://*
 * @license MIT License
 * @require 

使い方）
画像をクリックする。console.log を確認する。

註）以下の画像は未対応です。
1. backgroundで指定されたもの。
2. ページ移動する javascript が設定されたもの。
3. iframe内のもの。

Thanks for inspiration:
http://let.hatelabo.jp/noromanba/let/gYC-yuC1yoHyZw
http://let.hatelabo.jp/amachang/let/gYC-xauujbmgLw

 */

(function(f){
    // jQuery check
    if(window.jQuery && jQuery().jquery > '1.8') {
        f(jQuery);
    } else {
        var script = document.createElement('script');
        script.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
        script.onload = function(){
            var $ = jQuery.noConflict(true);
            f($);
        };
        document.body.appendChild(script);
    }
})(function($, undefined){
    //href 無効化
    $('a').click(function(){
        return false;
    });

    //------------------------------------------------- main
    Object.keys(document.images).forEach(
        function(key) {
            +function (e) {
                e.onclick = function () {
                    $.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
                        q: "select * from data.uri where url='" + e.src + "'",
                        format: "json"
                    },result);
                    function result(json){
                        console.log(json.query.results.url);
                        console.log(json.query.results.url.length.toLocaleString() + ' bytes');
                    }
                };
            }(document.images[key]);
        }
    );
})
    • 
  
  • 
    
    
    
      
    
        
    Permalink
    
        
    このページへの個別リンクです。
    
        
    RAW
    
        
    書かれたコードへの直接のリンクです。
    
        
    Packed
    
        
    文字列が圧縮された書かれたコードへのリンクです。
    
        
    Userscript
    
        
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    
        
    Loader
    
        
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    
        
    Metadata
    
        
    コード中にコメントで @xxx と書かれたメタデータの JSON です。
    
      
    
    
    
  
    • 







  
History

  
    
    
  1. 2017/11/05 21:34:09 - 2017-11-05
    2.