Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not working for webkit-filter #493

Open
Prashu33 opened this issue Dec 26, 2014 · 33 comments
Open

Not working for webkit-filter #493

Prashu33 opened this issue Dec 26, 2014 · 33 comments
Labels
Projects

Comments

@Prashu33
Copy link

@Prashu33 Prashu33 commented Dec 26, 2014

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
Copy link
Owner

@niklasvh niklasvh commented Dec 26, 2014

css filter's haven't been implemented

@niklasvh niklasvh added the Feature label Dec 26, 2014
@moxet
Copy link

@moxet moxet commented Mar 5, 2015

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

@animista01
Copy link

@animista01 animista01 commented Jul 14, 2015

+1. I'm waiting too

@danielfigueroa
Copy link

@danielfigueroa danielfigueroa commented Aug 3, 2015

What about this new feature?

@jonasmiddendorf
Copy link

@jonasmiddendorf jonasmiddendorf commented Jun 13, 2016

+1. I'm waiting too

@arsen2010
Copy link

@arsen2010 arsen2010 commented Jun 14, 2016

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

@zhiyan
Copy link

@zhiyan zhiyan commented Jan 3, 2017

+1. waiting too

@ghost
Copy link

@ghost ghost commented Jan 31, 2017

+1

1 similar comment
@benlei
Copy link

@benlei benlei commented Feb 14, 2017

+1

benlei referenced this issue in benlei/dnSkillTree Feb 14, 2017
@kriosguerra3
Copy link

@kriosguerra3 kriosguerra3 commented Mar 6, 2017

+1

3 similar comments
@LanderBeeuwsaert
Copy link

@LanderBeeuwsaert LanderBeeuwsaert commented Aug 14, 2017

+1

@fernandofc
Copy link

@fernandofc fernandofc commented Aug 24, 2017

+1

@alexkostenko
Copy link

@alexkostenko alexkostenko commented Sep 1, 2017

+1

@cyan33
Copy link

@cyan33 cyan33 commented Feb 9, 2018

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
Copy link

@shudery shudery commented Dec 17, 2018

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
Copy link

@Prindl Prindl commented Feb 25, 2019

I added basic filter support into html to canvas.
#1763

@sho-87
Copy link

@sho-87 sho-87 commented Nov 5, 2019

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

@byeze
Copy link

@byeze byeze commented Mar 24, 2020

Updates?

@ysk2014
Copy link

@ysk2014 ysk2014 commented Sep 1, 2020

fix #2300

@istoan
Copy link

@istoan istoan commented Oct 19, 2020

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
Copy link

@ysk2014 ysk2014 commented Oct 20, 2020

@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
Copy link

@istoan istoan commented Oct 20, 2020

@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
Copy link

@ysk2014 ysk2014 commented Oct 20, 2020

@istoan you can git clone git@github.com:ysk2014/html2canvas.git and run npm start

@istoan
Copy link

@istoan istoan commented Oct 20, 2020

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
Copy link

@istoan istoan commented Oct 20, 2020

@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
Copy link

@ysk2014 ysk2014 commented Oct 20, 2020

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

@istoan
Copy link

@istoan istoan commented Oct 20, 2020

@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:
Screenshot of HTML Elements

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

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
Copy link

@ysk2014 ysk2014 commented Oct 21, 2020

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

@istoan
Copy link

@istoan istoan commented Oct 21, 2020

@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
Copy link

@ysk2014 ysk2014 commented Oct 21, 2020

@istoan Sorry. Filter only supports img at present

@istoan
Copy link

@istoan istoan commented Oct 21, 2020

@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
Copy link

@ysk2014 ysk2014 commented Oct 21, 2020

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

@istoan
Copy link

@istoan istoan commented Oct 21, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Backlog
Backlog
Linked pull requests

Successfully merging a pull request may close this issue.

None yet