Failed to construct 'Worker'

[Ahaochan]

Hi! I want to convert <canvas> tag to <img> tag. I want to get gif from canvas. I use Greasemonkey to inject My javascript.

like this Pixiv Canvas

Greasemonkey must be declare require js in @require. I try to declare gif.worker.js in @require. But it is fail. I try to use CDN js, But has a error msg Failed to construct 'Worker': Script at 'https://cdn.bootcss.com/gif.js/0.2.0/gif.worker.js' cannot be accessed from origin 'https://www.pixiv.net'.

// ==UserScript==
// @name    Pixiv Plus
// @namespace   https://github.com/Ahaochan/Tampermonkey
// @version     0.0.9
// @description pixiv
// @author      Ahaochan
// @include     http*://www.pixiv.net*
// @match       http://www.pixiv.net/
// @supportURL  https://github.com/Ahaochan/Tampermonkey
// @require     https://code.jquery.com/jquery-2.2.4.min.js
// @require     https://cdn.bootcss.com/gif.js/0.2.0/gif.js
// @run-at      document-end
// ==/UserScript==
            var gif = new GIF({
                workers: 2,
                quality: 10,
                // use CDN js
                workerScript: 'https://cdn.bootcss.com/gif.js/0.2.0/gif.worker.js'
            });
            var $palyer = $('div.player');

            setInterval(function () {
                var $canvas = $palyer.find('canvas');
                if($canvas.length <= 0){
                    return ;
                }
                gif.addFrame($canvas.get(0), {delay: 200});
                console.log("test1");
                gif.on('finished', function(blob) {
                    console.log("test2");
                    var url = URL.createObjectURL(blob);
                    console.log("test:"+url);
                    $palyer.append('<img src="'+url+'"/>');
                    console.log("test3");
                });
                console.log("test4");
                gif.render();
                console.log("test5");
                $canvas.remove();
            }, 1000);

How I resolve it ? Thank!

[1j01]

This could be resolved by removing the dependency entirely: https://github.com/jnordberg/gif.js/issues/58

But see https://github.com/jnordberg/gif.js/issues/47#issuecomment-129410833 for a solution in the meantime.

[Ahaochan]

I tryed it. But The canvas get a BLACK SCREEN <img> tag. What I wrong? I guess , Maybe gifjs cannot support jquery?

// ==UserScript==
// @name    Pixiv Plus
// @namespace   https://github.com/Ahaochan/Tampermonkey
// @version     0.0.9
// @description pixiv
// @author      Ahaochan
// @include     http*://www.pixiv.net*
// @match       http://www.pixiv.net/
// @require     https://code.jquery.com/jquery-2.2.4.min.js
// @require     https://cdn.bootcss.com/gif.js/0.2.0/gif.js
// @run-at      document-end
// ==/UserScript==

//  GM_xmlhttpRequest is a Ajax request method that it can support accross domain
GM_xmlhttpRequest({
    method: 'GET',
    url: 'https://cdn.bootcss.com/gif.js/0.2.0/gif.worker.js',
    onload: function (xhr) {
        var workerJS = xhr.responseText;
        var blob;
        try {
            blob = new Blob([workerJS], {
                type: 'application/javascript'
            });
        } catch (e) { // Backwards-compatibility
            window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
            blob = new BlobBuilder();
            blob.append(response);
            blob = blob.getBlob();
        }
        var gif = new GIF({
            workers: 2,
            workerScript: URL.createObjectURL(blob),
            quality: 10
        });

        // use jquery to get The Elements
        var $palyer = $('div.player');
        setInterval(function () {
            // use jquery to get The <canvas> tag
            var $canvas = $palyer.find('canvas');
            if ($canvas.length <= 0) {
                return;
            }
            // find The first <canvas> tag
            gif.addFrame($canvas.get(0), {delay: 200});
            console.log("test1");
            gif.on('finished', function (blob) {
                console.log("test2");
                var url = URL.createObjectURL(blob);
                console.log("test:" + url);
                $palyer.append('<img src="' + url + '"/>');
                console.log("test3");
            });
            console.log("test4");
            gif.render();
            console.log("test5");
            $canvas.remove();
        }, 1000);
    }
});

[Ahaochan]

I resolve it. Import: Pixiv plus#27 Use: Pixiv plus#L611-L674