4

我需要帮助设置Jadriens FileReader.js。我已经设置了一切，因为我认为这个 polyfill 有效。但是当一切启动时触发的回调在 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();
});
});

很多代码，但我认为上下文可能会有所帮助。重要的行就在初始化注释的下方。.fileReader init 选项中的回调函数永远不会触发。不过，它确实会在其他现代浏览器中触发（如果您删除 if 语句）。

4

2 回答 2

5

这里有一个错误的组合。

  • Jahdriens 文件阅读器负责闪存的嵌入。只需包含 swfObject 库。
  • 浏览器嗅探 = 坏主意。Modernizr = 好主意。
  • 确保你安装了 IE 的 flash :(

我的最终代码看起来像这样，并且运行良好。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

IE9的问题是你需要先安装flash player 还有很多IE9不支持的功能

于 2012-10-10T06:07:10.230 回答