Изображение Canvas не отображается в Chrome (работает в FF4 и IE9)

#javascript #jquery #canvas

#javascript #jquery #холст

Вопрос:

Я в тупике. Хоть убейте, я понятия не имею, почему это не работает в Chrome. Вы можете увидеть код здесь:

Когда я запускаю этот код в FF или IE9, он отлично работает. Вы заметите, что fiddle БУДЕТ работать в Chrome с отображаемым элементом, но он НЕ работает вне fiddle.

Любая помощь приветствуется. Это моя первая попытка с canvas.

Ответ №1:

Проблема, похоже, в том, что вы не ожидаете загрузки исходного элемента изображения. Если вы немного измените его, оно будет работать нормально:

   $(function() {
    var canvas = document.createElement('canvas'),
    canvasExists = !!(canvas.getContext amp;amp; canvas.getContext('2d')),
    oImage = $('img')[0];

    if (canvasExists) {
      var context = canvas.getContext('2d'), img = new Image();

      img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;

        $(oImage).replaceWith(canvas);

        context.drawImage(oImage, 0, 0);
      }

      img.src = oImage.src; 
    } else {
      // apply MS filters
    }

1. потрясающе! отлично работает! Из любопытства, почему я должен создавать новое изображение и устанавливать src на исходное изображение, а не просто использовать существующее изображение?

2. Ну, вы могли бы поместить обработчик «load» в <img> элемент, я думаю — я просто написал это так по привычке. Дело в том, что вы хотите подождать, пока браузер не решит, что получил доступ к изображению, прежде чем пытаться получить ширину / высоту (и, конечно, фактические пиксели 🙂

Ответ №2:

Может быть сложно использовать img.onload, если у вас их много. Простой способ дождаться загрузки изображения в Chrome — использовать :

 $(window).load(function () {

вместо

 $(document).ready(function () {

как $ (window).загрузка фактически ожидает загрузки всего изображения.

Это идеально подходит для использования изображения на холсте. (работает также в firefow и IE)