Image to data URI converter

  • /*
     * @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