Jump to content
  • 0

Ошибка в работе canvas + stackblur


slo_nik
 Share

Question

Добрый вечер.

Помогите решить проблему.

Есть слайдер с картинками, фоном блока, где размещён слайдер, является текущая картинка.

При загрузке страницы выводится ошибка:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.ccimg.drawImage(Img, 0, 0, canvas.width, canvas.height);

Изначально код был таким:

	<div id="wrap">      <img src="2.jpg" alt="" id="img">			</div>	<div id="canvasInner">	  <canvas id="canvas"></canvas>	</div>	<script>	  var canvas = document.getElementById('canvas')	  var ccimg = canvas.getContext('2d')	  var img = document.getElementById('img')      img.onload = function(){	    ccimg.drawImage(img, 0, 0, canvas.width, canvas.height)	    StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 10)	  }	</script>

Я его немного переделал.

  setInterval(function(){    $('.fotorama__stage__shaft')     .find('.fotorama__active:first')     .find('.fotorama__img')     .attr('id', 'imgCanvas') /* добавляем первому изображению атрибут  id */    var canvas = $('#canvas').get(0)    var ccimg = canvas.getContext('2d')        var Img = $('#imgCanvas').get(0)      ccimg.drawImage(Img, 0, 0, canvas.width, canvas.height);      StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 8);  }, 150)

Вот этот участок кода:

var Img = $('#imgCanvas').get(0)ccimg.drawImage(Img, 0, 0, canvas.width, canvas.height);StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 8);

сделал так:

var Img = $('#imgCanvas').get(0)Img.onload = function(){   ccimg.drawImage(Img, 0, 0, canvas.width, canvas.height);   StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 8);}

и получил ошибку в firebug "TypeError: Img is undefined", a без "Img.onload = ...." получаю ошибку, которую указал выше "TypeError: Argument 1 of CanvasRenderingContext2D".

 

Подскажите, пожалуйста, как избавиться от ошибки?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Вечер добрый!

Подозреваю, Вы тестили в хроме свое творенье? Если так, то попробуйте протестить в другом браузере, например, ФФ. Конкретно Ваш пример я не тестил, но тестил немного модифицированный мною:

HTML:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="wrap">        <img src="img.png" alt="" id="img">    </div>    <div id="canvasInner">        <canvas id="canvas"></canvas>    </div>    <script src="jquery-1.11.3.js"></script>    <script src="stackblur.min.js"></script>    <script src="script.js"></script></body></html>

JS:
 

jQuery(function ($) {    var canvas = $('#canvas').get(0);    var ccimg = canvas.getContext('2d');    var img = $('#img').get(0);    ccimg.drawImage(img, 0, 0);    StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 8);});

Думаю, все заработает  ;)  

Это связано с тем, что у Хрома спецефический алгоритм работы с локальными файлами, который может выражаться вот в таких косяках, как произошел у Вас. Так бывает, когда вы просто открываете html файл в браузере. Для того, чтобы такого не происходило, можно включить в хроме параметр --allow-file-access-from-files. Об этом можно почитать тут: http://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode.

Ну, а если не хочется танцевать с бубном вокруг хрома, то просто поднимите локальный сервер, например, OpenServer (http://open-server.ru/) или xampp, откройте свой ваш проект на этом сервере, и будет Вам счастье ;)  Все будет работать :)

Link to comment
Share on other sites

  • 0

Так в том-то и дело, что тестил я в firefox и на localhost(Apache/2.4.7).

Имена файлов хранятся в БД, сначала формируется строка с изображениями для слайдера, потом применяется stackblur.

 

Формирую строку:

           $allImg = '';           foreach($images as $val) :                         if($val->itemId != 0) :              $allImg .= "{img : '" . Url::to(['/images/default/download/', 'id' => $val->id]) . "', caption: '" . $val->title . ", " . $val->description . ", " . $val->year . " год.'},";             endif;           endforeach;$script = <<<JS  var fotoDiv = $('.fotorama').fotorama({                    width: '100%',                    height: '75%',                    data: [                       $allImg                    ]                  })JS;

Скрипт stackblur расположен в самом низу документа.

 

Наверное проблема в том, что скрипт stacklur расположен перед(!) скриптом fotorama... Поменяю местами и проверю работу, может ошибка уйдёт. Сразу не обратил на это внимание.

 

P.S Проверил, проблема осталась(((

Edited by slo_nik
Link to comment
Share on other sites

  • 0

Увидеть бы где-то это в живую. Потому что исходя из Ваших кусочков кода ничего не ясно, честно говоря.

А то Вы вчера говорите, что проблема только в StackBlur и Canvas. Сегодня уже fotorama у Вас появилась. Как же вы хотите не предоставив полной картины, чтобы Вам помогли?

У себя я протестил, проблем со StackBlur и Canvas нету никаких, можете мой полный код у себя проверить, если мне не верите. Значит, проблема в каком-то другом месте Вашего кода, и без видения картины в целом, сомневаюсь, что Вам кто-либо сможет помочь. Возможно вообще на бекенде трабл у Вас, в таком случае не один фронтендер без разворачивания проекта локально вам точно не поможет.

Только на догадках. Одна из догадок состоит в том, что вам стоит запихнуть Ваш блур в коллбэк фоторамы, если я правильно понял идею вообще.

Edited by yardim
Link to comment
Share on other sites

  • 0

Увидеть бы где-то это в живую. Потому что исходя из Ваших кусочков кода ничего не ясно, честно говоря.

А то Вы вчера говорите, что проблема только в StackBlur и Canvas. Сегодня уже fotorama у Вас появилась. Как же вы хотите не предоставив полной картины, чтобы Вам помогли?

У себя я протестил, проблем со StackBlur и Canvas нету никаких, можете мой полный код у себя проверить, если мне не верите. Значит, проблема в каком-то другом месте Вашего кода, и без видения картины в целом, сомневаюсь, что Вам кто-либо сможет помочь. Возможно вообще на бекенде трабл у Вас, в таком случае не один фронтендер без разворачивания проекта локально вам точно не поможет.

Только на догадках. Одна из догадок состоит в том, что вам стоит запихнуть Ваш блур в коллбэк фоторамы, если я правильно понял идею вообще.

 

Попробуйте посмотреть здесь , живой пример...

Я понимаю, что проблема связана с привязкой fotorama + stackblur, для этого сделал setInterval(), не хотел скрипт без этого работать.

Сейчас работает всё, fotorama + stackblur, но ошибка раздражает, хотелось бы её убрать...

Edited by slo_nik
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy