Giter Site home page Giter Site logo

alpha transparency about ccapture.js HOT 7 CLOSED

tonycaso avatar tonycaso commented on August 19, 2024
alpha transparency

from ccapture.js.

Comments (7)

spite avatar spite commented on August 19, 2024 1

i would advice using the PNG option of the capturer and use FFmpeg to create a QuickTime or AVI video that supports transparency natively.

from ccapture.js.

aleen42 avatar aleen42 commented on August 19, 2024

I think we can just change this library.

from ccapture.js.

aleen42 avatar aleen42 commented on August 19, 2024

@tonycaso I have just overridden the function:

function _capture(canvas) {
    if (_settings.format === 'webm') {
        /** store current context state into a new canvas */
        var c = document.createElement('canvas');
        var ctx = c.getContext('2d');
            c.width  = canvas.width;
            c.height = canvas.height;
            ctx.fillStyle = _settings.bakckgroundColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(canvas, 0, 0);
    }

    if (_capturing) {
        if (_settings.motionBlurFrames > 2) {
            _checkFrame(c);
            _blendFrame(c);

            if (_intermediateFrameCount >= .5 * _settings.motionBlurFrames) {
                _saveFrame();
            } else {
                _step();
            }
        } else {
            _encoder.add(c);
            _frameCount++;
            _log('Full Frame! ' + _frameCount);
        }
    }
}

And then you can just create a CCapture object capturer like the following:

capturer = new CCapture({
    verbose: false, 
    display: false,
    framerate: drawFPS,
    format: 'webm',
    frameLimit: 0,
    bakckgroundColor: '#fff',
    onProcess: function (frameCount) {
        time.mark('Capturing Frame Number: <span class="font-a10000 font-bold">' + frameCount + '</span>', 'frameCount');
    }
}); 

from ccapture.js.

spite avatar spite commented on August 19, 2024

I think @tonycaso was asking for alpha support on webm (which doesn't support)

from ccapture.js.

aleen42 avatar aleen42 commented on August 19, 2024

@spite Oh, maybe, the transparent pixel can be represented by a white value, if creating webm.

from ccapture.js.

spite avatar spite commented on August 19, 2024

Yes, it can be masked with any color (specially #00ff00 or #ff00ff), but the developer can implement that in his own code (adding a solid background color). Your fix is still god, though (except bakckgroundColor should be backgroundColor)

from ccapture.js.

aleen42 avatar aleen42 commented on August 19, 2024

@spite Yup, that's right. However, when we must layering in Canvas, that should be a complex problem if developer implement this in their code. Here is the example video of my application: http://share.soundtooth.cn/2d92cca5-c9b8-85ed-3492-436423a9005f.webm . When drawing the red color, it will be a problem for our developers.

from ccapture.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.