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.
#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 git@github.com: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:

html2canvas@1.0.0-rc.5 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! html2canvas@1.0.0-rc.5 start: node tests/server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the html2canvas@1.0.0-rc.5 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:

html2canvas@1.0.0-rc.5 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

[istoan]

@ysk2014 Oh, that's why I got those results. Do you know any library that can save an image from HTML elements with filters applied? I really need a solution for this in order to deliver the functionality my app had inside the old Flash based version.

[ysk2014]

@istoan You can try dom-to-image. In fact, html2canvas can also be implemented, but the compatibility is not good

[istoan]

@ysk2014 Thank you very much! dom-to-image works as it should. You are a life saver!

[Ronkiro]

Any updates to this? dom-to-image is sadly not working well in my case. Html2canvas does everything correctly, the only problem is the filter

[Jashan66]

Any updates to this? dom-to-image is sadly not working well in my case. Html2canvas does everything correctly, the only problem is the filter

+1

[AugustinMortier]

I would also appreciate very much this feature :)

[vini-rossi]

I would also appreciate very much this feature :)

+1

[hkanizawa]

I would also appreciate very much this feature :)

+1

[Ronkiro]

For people looking for a solution that doesn't uses dom-to-image, i managed to make what i wanted by using Jimp.

See jimp-dev/jimp#1194

[FranH20]

I have the same problem, the filter brightness() dosen't work.