DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'

[DmitrySkibitsky]

The path to the images is correct. Help solve the problem.

            var imags360 = {!! json_encode($image360->toArray()) !!};
            console.log(imags360);
            $('#images360').spritespin({
                source: images360,
                width: 300,
                height: 300,
                sense: -1
            });

[DmitrySkibitsky]

for example, one of the images in the list.

Suddenly this is Laravel

[DmitrySkibitsky]

/home/dmitry/PhpProjects/laravel-filters/public/images/filters/w-86/360/filter_5b0823784fd93.jpg
or
http://127.0.0.1:8000/images/filters/w-86/360/filter_5b0823784fd93.jpg

So the same mistake.

[giniedp]

could you open then network tab and inspect one of the image requests?

[DmitrySkibitsky]

@giniedp ,

url in the browser's address bar: http://127.0.0.1:8000/admin/filter/6

demo template

<div id="images360"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type='text/javascript'></script>
<script src='https://unpkg.com/spritespin@4.0.3/release/spritespin.js' type='text/javascript'></script>
@if($item->images360->count() > 0)
    @php
        $image360 = $item->images360->map(function ($item) {
            return '/images/filters/'.$item['image'];

        });
    @endphp
    <script type="text/javascript">
        var imags360 = {!! json_encode($image360->toArray()) !!};
        console.log(imags360);
        $('#images360').spritespin({
            source: images360,
            width: 300,
            height: 300,
            sense: -1
        });
    </script>
@endif

In addition to what I wrote above in the template, there is nothing.

It looks strange

[giniedp]

it seems like your php code generates an invalid image url

[DmitrySkibitsky]

@giniedp

       $guzzle = new \GuzzleHttp\Client([
            'base_uri' => 'https://car-filters.app',
            'timeout'  => 5.0,
            'verify' => false
        ]);
        $file_exists = $filter->images360->map(function($item) {
            $path = "/images/filters/{$item['image']}";
            return "File exist [{$path}]: ".File::exists(public_path($path));
        });
        $status_code = $filter->images360->map(function($item) use ($guzzle) {
            $url = url('/images/filters/'.$item['image']);
            $response = $guzzle->get($url);
            return "URL {$url}. Status code: ".$response->getStatusCode();
        });

But the plugin does not want to work. And I do not know why.

[giniedp]

i can not help you with your PHP code. You have to make sure that the URLs are generated correctly. In your screenshot of the network panel i do not see any image request but there are some broken ones like "[object%20HTMLDivElement]".

SpriteSpin does not do anything fancy with the image urls. It just passes them to the browser. If you make sure that the generated urls are valid for the browser, then they are valid for SpriteSpin

[DmitrySkibitsky]

@giniedp
I just now came up with the idea to remove the digits from the div identifier and it started working.

[giniedp]

👍

[patricklindsay]

Incase anyone else comes across this -

I had the same error and it was because my target container contained an image which I had planned to override. SpriteSpin automatically adds any images in the target container to the end of the source array. For whatever reason when adding it the src was undefined

https://github.com/giniedp/spritespin/blob/master/src/core/boot.ts#L184-L189