4

JadriensFileReader.jsの設定についてサポートが必要です。このポリフィルが機能すると思うので、すべてを設定しました。ただし、すべてが開始されたときに発生するコールバックは、IE9では発生しません。これは私のマークアップです：

<body>
<div class="main">
    <canvas id="mainCanvas" width="600" height="600"></canvas><br />
    <div id="fileReaderSWFObject"></div>
    <input type="file" id="imageLoader" name="imageLoader" /><br />
    <input id="text" type="text" placeholder="some text...">
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<!--[if lt IE 10]>
    <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script src="js/vendor/jquery-ui-1.8.23.custom.min.js"></script>
    <script src="js/vendor/jquery.FileReader.min.js"></script>
<![endif]-->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>

そしてこれはmain.jsです：

$(function () {
// Variables
var canvas = document.getElementById('mainCanvas');
var context = canvas.getContext('2d');
var canvasCenter = canvas.width / 2;
var img = '';
var newImageHeight = 0;
var logoX = 0;
var padding = 50;

// Functions
var flushCanvas = function () {
    context.fillStyle = '#000';
    context.fillRect(0, 0, canvas.width, canvas.width + padding);
    if (img !== '') {
        context.drawImage(img, padding, padding, canvas.width - (padding * 2), newImageHeight - (padding * 2));
    }
    setText();
};
var setText = function () {
    context.textAlign = 'center';
    context.fillStyle = '#fff';
    context.font = '22px sans-serif';
    context.textBaseline = 'bottom';
    context.fillText($('#text').val(), canvasCenter, canvas.height - 40);
};

// Init
if ($.browser.msie && $.browser.version <= 9) {
    swfobject.embedSWF('filereader.swf', 'fileReaderSWFObject', '100%', '100%', '10', 'expressinstall.swf');
    $('#imageLoader').fileReader({
        id: 'fileReaderSWFObject',
        filereader: 'filereader.swf',
        expressInstall: 'expressInstall.swf',
        debugMode: true,
        callback: function () { console.log('filereader ready'); }
    });
}
$('#imageLoader').change(function (e) {
    if ($.browser.msie && $.browser.version <= 9) {
        console.log(e.target.files[0].name);
    } else {
        var reader = new FileReader();
        reader.onload = function (event) {
            img = new Image();
            img.onload = function () {
                newImageHeight = (img.height / img.width) * (canvas.width);
                canvas.height = newImageHeight + padding;
                flushCanvas(); 
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
});
$('#text').keyup(function (e) {
    flushCanvas();
});
});

多くのコードがありますが、コンテキストが役立つかもしれないと思いました。重要な行は、Initコメントのすぐ下にあります。.fileReaderinitオプションのcallback関数は起動しません。ただし、他の最新のブラウザでは起動します（ifステートメントを削除した場合）。

4

2 に答える 2

5

ここには間違いの組み合わせがあります。

  • Jahdriensfilereaderがフラッシュの埋め込みを処理します。swfObjectライブラリを含めるだけです。
  • ブラウザのスニッフィング=悪い考え。Modernizr=良いアイデア。
  • IE用のフラッシュがインストールされていることを確認してください:(

私の最終的なコードは次のようになり、完璧に機能します。HTML：

<canvas id="mainCanvas" width="600" height="600"></canvas><br />
<a id="imageLoaderButton" class="button upload">load image</a>
<input type="file" id="imageLoader" class="hidden" name="imageLoader" />
<input id="text" type="text" placeholder="some text...">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>

+頭の中のmodernizrのカスタムビルドにリンクします。（カスタムビルドを作成するときは、[非コア検出]-> [file-api]をクリックします）

そして私のJS：

$(function () {
    Modernizr.load({
        test: Modernizr.filereader,
        nope: ['js/vendor/swfobject.js', 'js/vendor/jquery-ui-1.8.23.custom.min.js', 'js/vendor/jquery.FileReader.min.js'],
        complete: function () {

            if (!Modernizr.filereader) {
                $('#imageLoaderButton').fileReader({
                    id: 'fileReaderSWFObject',
                    filereader: 'filereader.swf',
                    expressInstall: 'expressInstall.swf',
                    debugMode: true,
                    callback: function () { 
                        $('#imageLoaderButton').show().on('change', read);
                    }
                });
            } else {
                $('#imageLoaderButton').show().on('click', function () {
                    $('#imageLoader').trigger('click').on('change', read);
                });
            }

        }
    });
    // Variables
    var canvas = document.getElementById('mainCanvas');
    var context = canvas.getContext('2d');
    var canvasCenter = canvas.width / 2;
    var img = '';
    var padding = 50;

    // Functions
    var flushCanvas = function () {
        context.fillStyle = '#000';
        context.fillRect(0, 0, canvas.width, canvas.width + padding);
        if (img !== '') {
            context.drawImage(img, padding, padding, canvas.width - (padding * 2), newImageHeight - (padding * 2));
        }
        setText();
    };
    var setText = function () {
        context.textAlign = 'center';
        context.fillStyle = '#fff';
        context.font = '22px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText($('#text').val(), canvasCenter, canvas.height - 40);
    };
    var read = function (e) {
        if (typeof FileReader !== 'undefined') {
            var reader = new FileReader();
            reader.onload = function (event) {
                img = new Image();
                img.onload = function () {
                    newImageHeight = (img.height / img.width) * (canvas.width);
                    canvas.height = newImageHeight + padding;
                    flushCanvas();
                }
                img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);

        }
    };

    $('#text').keyup(function (e) {
        flushCanvas();
    });
});
于 2012-10-04T14:19:11.733 に答える
3

The problem with IE9 is you need flash player to be installed first also there are many features not supported by IE9

于 2012-10-10T06:07:10.230 に答える