iframe-proxy | Sunbelt Computer Software

106 lines (106 loc) · 4.61 KB
<!DOCTYPE HTML>
 * JavaScript Load Image Demo 1.2.1
 * https://github.com/blueimp/JavaScript-Load-Image
 * Copyright 2011, Sebastian Tschan
 * https://blueimp.net
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
<html lang="en">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>JavaScript Load Image</title>
<meta name="description" content="JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<style>body{padding-top:60px;}</style>
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="https://github.com/blueimp/JavaScript-Load-Image">JavaScript Load Image</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Demo</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image/downloads">Downloads</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image">Source Code</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image">Documentation</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image/issues">Issues</a></li>
                    <li><a href="test/">Test</a></li>
                    <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
                </ul>
            </div>
        </div>
<div class="container">
    <div class="page-header">
        <h1>JavaScript Load Image Demo</h1>
    <blockquote>
        <p><a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a> Load Image is a function to load images provided as <a href="https://developer.mozilla.org/en/DOM/File">File</a> or <a href="https://developer.mozilla.org/en/DOM/Blob">Blob</a> objects or via URL.<br>
            It returns an optionally scaled HTML <strong>img</strong> or <strong>canvas</strong> element.</p>
    </blockquote>
    <div class="row">
        <div class="span5">
            <h2>Select an image file</h2>
            <p><input type="file" id="file-input"></p>
            <p><span class="label label-info">Notice</span> Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
        </div>
        <div class="span7">
            <h2>Result</h2>
            <div class="well" id="result"><p><span class="label label-warning">Notice</span> This demo works only in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p></div>
        </div>
<script src="load-image.min.js"></script>
<!-- jQuery and Bootstrap JS are not required, but included for the demo -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
/*global jQuery, window, document */
(function ($) {
    'use strict';
    var result = $('#result'),
        load = function (e) {
            e = e.originalEvent;
            e.preventDefault();
            window.loadImage(
                (e.dataTransfer || e.target).files[0],
                function (img) {
                    result.children().replaceWith(img);
                    maxWidth: result.children().outerWidth(),
                    canvas: true
    $(document)
        .on('dragover', function (e) {
            e = e.originalEvent;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        .on('drop', load);
    $('#file-input').on('change', load);
}(jQuery));
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls
