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

slo_nik · November 18, 2015

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

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

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

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

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".

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

yardim · November 18, 2015

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

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

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, откройте свой ваш проект на этом сервере, и будет Вам счастье Все будет работать

slo_nik · November 19, 2015

Так в том-то и дело, что тестил я в 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 November 19, 2015 by slo_nik

yardim · November 19, 2015

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

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

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

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

Edited November 19, 2015 by yardim

slo_nik · November 19, 2015

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

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

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

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

Edited November 19, 2015 by slo_nik

Sign In

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

Question

slo_nik

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

yardim

Link to comment

Share on other sites

slo_nik

Link to comment

Share on other sites

yardim

Link to comment

Share on other sites

slo_nik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information