Question

这个功能出了什么问题？

window.LoadImage = function(el, canvasId){
            var canvas = document.getElementById(canvasId);
            var context = canvas.getContext("2d");
            var dialogCanvas = document.getElementsByClassName('dialogCanvas');
            var dialogContext = dialogCanvas[0].getContext("2d");
            var reader = new FileReader();
            reader.onload = function(event){
                var img = new Image();
                img.onload = function(){
                    var w = 545;
                    var imgW = img.width;
                    var imgH = img.height;
                    var dialogW = dialogCanvas[0].width;
                    var dialogH = dialogCanvas[0].height;

                    h = (imgH / imgW) * w;
                    dialogH = (imgH / imgW) * dialogW;  

                    context.clearRect(0, 0, w, imgH);
                    dialogContext.clearRect(0,0, dialogW, 250);
                    canvas.width = w;
                    canvas. height = h;
                    context.drawImage(img,0,0,w,h);
                    dialogContext.drawImage(img,0,0,dialogW, dialogH);

                }
            img.src = event.target.result;

            }
            reader.readAsDataURL(event.target.files[0]); 
        }

我正在尝试使用此功能绘制2个不同的画布。两者都不适用于Firefox。该死的东西适用于Chrome和IE。

“dialogCanvas”是一个jquery模式框内的预览，另一个是使用“canvasId”参数到达的，在页面中有display = "none"。

我在firefox上没有收到任何错误。实际上，我甚至无法调试它。

提前致谢。

修改 jsfiddle = http://jsfiddle.net/cgEv8/

Answer 1

这一行：

        reader.readAsDataURL(event.target.files[0]);

指“事件”。那是哪里？在某些浏览器中，它是一个全局对象，但不在Firefox中。

Answer 2

正如已经指出的那样，事件未定义。在Firefox中，我在小提琴上得到了这个错误：

ReferenceError：未定义事件。尝试处理事件

您应该使用以下方式处理事件：

$('#t1-1-img-header').on('change', LoadImage);

然后在你的处理程序中你可以使用

function LoadImage(event) {

    var el = this;  /// this will be the calling element
    ...
}

（当然你需要删除元素本身的onchange属性）。

对于画布ID，您需要直接传递它或使用其他方法存储它，以便它可用于回调范围。

<强> Modified fiddle here

画布未在Firefox上加载

2 个答案: