Not working for webkit-filter

[Prashu33]

I'm using webkit brightness effect on canvas but while converting that canvas into new canvas these effects are not applied..

-webkit-filter: brightness(1.3); -moz-filter: brightness(1.3);

[niklasvh]

css filter's haven't been implemented

[moxet]

I am also waiting for filters to be implemented, @niklasvh any idea if we could do it by ourselves? Regards

[animista01]

+1. I'm waiting too

[danielfigueroa]

What about this new feature?

[jonasmiddendorf]

+1. I'm waiting too

[arsen2010]

Me too, expecting -webkit-filter:blur() work, thank you.

[zhiyan]

+1. waiting too

[ghost]

+1

[benlei]

+1

[kriosguerra3]

+1

[LanderBeeuwsaert]

+1

[fernandofc]

+1

[alexkostenko]

+1

[cyan33]

I wrote a tiny library that could screenshot the image along with the css filter properties, hope it helps https://github.com/cyan33/image-screenshot

[shudery]

I wrote a tiny library that could screenshot the image along with the css filter properties, hope it helps https://github.com/cyan33/image-screenshot

great

[Prindl]

I added basic filter support into html to canvas. https://github.com/niklasvh/html2canvas/pull/1763

[sho-87]

+1 @Prindl @niklasvh any updates on the pull request (#1763) that was submitted for handling CSS filters?

[byeze]

Updates?

[ysk2014]

fix #2300

[istoan]

Lately I've been converting Flash based web apps to HTML5/CSS and JavaScript. I've been using html2canvas to capture the HTML elements and converting them into images. Only problem I've been having is that it does not support filters and webkitTextStroke . I've been trying @ysk2014 #2300 fix, but it doesn't produce good results with webkitTextStroke and filters doesn't seem to be supported at all. I've tested with the Blur filter and the Shadow filter.

[ysk2014]

@istoan Can you provide some examples of not working? All the examples I wrote are in the tests folder：

• tests/reftests/images/filter.html
• tests/reftests/text/stroke.html
• tests/reftests/text/font-color-gradient.html

[istoan]

@ysk2014 I may not have the right html2canvas version. Where can I find a compiled version with support for filters and stroke? Is there a way to download a html2canvas.js file?

[ysk2014]

@istoan you can git clone [email protected]:ysk2014/html2canvas.git and run npm start

[istoan]

I managed to clone that after installing the Git Desktop app. I then opened the folder with VS Code and opened Terminal inside VS Code. Then I typed: npm start and I got the following error:

[email protected] start C:\Users\Paul\Documents\GitHub\html2canvas node tests/server

internal/modules/cjs/loader.js:584 throw err; ^

Error: Cannot find module 'express' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15) at Function.Module._load (internal/modules/cjs/loader.js:508:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object. (C:\Users\Paul\Documents\GitHub\html2canvas\tests\server.js:1:79) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: node tests/server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Paul\AppData\Roaming\npm-cache_logs\2020-10-20T11_19_02_101Z-debug.log

What am I doing wrong? And, is there an easier way to get a compiled version? Can you upload one to your repository?

[istoan]

@ysk2014 I'm new to this. I believe I first had to install all the dependencies needed. I did npm install and got all of them. I then typed npm start and I got:

[email protected] start C:\Users\Paul\Documents\GitHub\html2canvas node tests/server

Server running on port 8080 CORS server running on port 8081

But it seems I can't find a html2canvas.js file. Not sure how to actually compile one so I can use it in my project.

[ysk2014]

@istoan Run npm run build. A dist folder will be generated with the JS file you want

[istoan]

@ysk2014 I managed to compile the file and the results seem to be the same as with the other html2canvas.js file downloaded from https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870

This is how it looks inside my HTML page:

This is the results produced with the new html2canvas.js code:

Am I missing something? Are there some special arguments I need to add? Right now I use:

allowTaint: true,
scale: 2,
logging: false,
useCORS: true

[ysk2014]

@istoan Can you provide the code? It's easy for me to find problems.

[istoan]

@ysk2014 An example can be found here: https://istoan.com/work/html2canvas-filters-test/

And the files for that example are attached html2canvas-filters-test.zip

[ysk2014]

@istoan Sorry. Filter only supports img at present