Фильтр размытия IE8 на холсте

У меня есть холст, который работает благодаря Google excanvas в IE. Теперь я хочу размыть вещь. Я добавил фильтр размытия с собственным синтаксисом IE, и он размыл холст и текст внутри div.

Что ж... Это работало в IE7 и IE9, но нет в IE8. [Втф?!]

Надеюсь, кто-то видел это раньше.

Я также пытался включить размытие из javascript после рисования на холсте, но это ничего не изменило.

Вот живой пример:

http://jsfiddle.net/rd9q5/1/embedded/result/

Пример — это только код IE. Он не будет работать в других браузерах, но мой основной код работает.

Я поместил в пример интересную картинку, чтобы вы развлекались, пока будете мне помогать. :)

[редактировать]

Обычно размытие работает в IE8 — я помещаю текст внизу div на моей странице-примере, и текст размывается.


javascript canvas filter blur internet-explorer
person naugtur    schedule 25.06.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Это происходит из-за «position:absolute», указанного в g_vml_:shape, созданного строкой 597 excanvas.js.

Почему?!...

Поскольку в IE8 есть ОШИБКА, элементы с позицией, отличной от статической, не будут наследовать фильтры родительского элемента, если мы этого не сделаем.

Чтобы исправить это, выполните один из следующих вариантов.

function go() {
    var browser = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);
    if(document.styleSheets['ex_canvas_'] && browser && browser[2].slice(0,1) == '8'){
        var stylesheet = document.createStyleSheet();
        stylesheet.owningElement.id = 'ex_canvas_';
        stylesheet.cssText = '#cp *{filter:inherit;}';
    }
    // codes for draw
}

Or

<!--[if IE 8]>
    <style type="text/css">
         #cp *{
             filter:inherit;
         }
    </style>
<![endif]-->
person Beygi    schedule 29.06.2011
comment
Выглядит многообещающе. Это известная ошибка с общедоступным отчетом об ошибке, или вы просто случайно это знаете? - person naugtur; 29.06.2011
comment
Нет, я только что узнал, речь идет о тегах формы (g_vml_: shape), на самом деле у меня не было достаточно времени, чтобы найти подробности. Я искал об этом, и ничего не нашел. - person Beygi; 29.06.2011
comment
Я проверю это дома, и если это сработает - это заслуженная награда для вас. - person naugtur; 29.06.2011
comment
Спасибо, и я нахожу для вас настоящую проблему, и просто для удовольствия: я просто прекращаю работать над проектом для какой-то государственной компании. У меня в крови узнавать что-либо... :) - person Beygi; 29.06.2011
comment
Оба метода работают. Я понятия не имею, как вы это поняли :). Огромное спасибо! - person naugtur; 29.06.2011

arrow_upward
1
arrow_downward

Взгляните на эту статью. Это долгий путь, но может помочь.

http://aautar.digital-radiation.com/blog/?p=2519< /а>

Более:
person Mrchief    schedule 28.06.2011
comment
IE8 не поддерживает холст. Я уже использую код, полученный из pixastic fastblur, в поддерживаемых браузерах. Холст HTML5 не работает в IE8. Я использую excanvas от google для рисования на симуляции холста, у которой нет методов, позволяющих получить изображение и работать с пикселями. - person naugtur; 29.06.2011
comment
Я знаю, что IE8 не поддерживает холст. Не знал, что у excanvas нет таких методов. - person Mrchief; 29.06.2011
comment
В комментариях внутри excanvas.js есть примечание, в котором говорится, чего ему не хватает. Это довольно информативно. +1 за упоминание pixastic, у которого самое быстрое размытие, которое я смог найти (fastBlur) - person naugtur; 29.06.2011

arrow_upward
0
arrow_downward

Поскольку Microsoft сбросила «фильтр» после IE7, поэтому я удивлен, что вы говорите, что он работает в IE9.

person Rob    schedule 26.06.2011
comment
Нет, это не так. Фильтр работает в IE8 и 9, но почему-то не размывает холст. В моем примере внизу есть немного текста, который размывается каждым IE. - person naugtur; 26.06.2011