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

Add box-shadow rendering #1086

Closed
wants to merge 5 commits into from
Closed

Conversation

@eKoopmans
Copy link
Contributor

@eKoopmans eKoopmans commented Mar 26, 2017

Feature: Box-shadows

You know 'em, you love 'em: box-shadows! Requests for this feature date back to May 2013.

feature-box-shadow

Implementation

In paintElement, after rendering backgrounds but before borders, there is now renderShadows. It uses a new .mask() tool which behaves the opposite of .clip(), meaning the shadow will be drawn only outside the element container.

This feature includes support of multiple box-shadows.

Related issues/pull requests

#220, #221, #246, #510, #597, #673, #763

@AvanishKumar008
Copy link

@AvanishKumar008 AvanishKumar008 commented Apr 6, 2017

@eKoopmans @balupton @gatapia @CyberShadow @andyedinborough Have any solution for it. I have same issue please help me ASAP.

@CyberShadow
Copy link
Contributor

@CyberShadow CyberShadow commented Apr 6, 2017

@AvanishKumar008: Don't be a jerk. Mass-noticing people and begging for help is extremely rude. Not to mention that my only relation to this project is a contribution I made in 2012 (yes, over 5 years ago).

@AvanishKumar008
Copy link

@AvanishKumar008 AvanishKumar008 commented Apr 6, 2017

@CyberShadow I am just asking. I am not forcing you. If you want to fix you can.

@eKoopmans
Copy link
Contributor Author

@eKoopmans eKoopmans commented Apr 6, 2017

Hi @AvanishKumar008, this is a pull request which means I have solved the problem and I'm asking to add the feature into the repository. It won't be added in until the repo owner approves it.

If you want to use html2canvas with this new feature added, you can download this custom build I have made that includes drop-shadow support along with a few other new features and bugfixes. If you find any problems with how drop-shadows are rendered when you use that build, you can comment here to let me know. Thanks!

@AvanishKumar008
Copy link

@AvanishKumar008 AvanishKumar008 commented Apr 7, 2017

@eKoopmans You did great job for box shadow and some other thing as well but full picture not showing. Please check again and fix it.

Best of luck

@eKoopmans
Copy link
Contributor Author

@eKoopmans eKoopmans commented Apr 8, 2017

@AvanishKumar008 I'm happy to take a look if you give me a link to an example, but as it is your comment isn't helpful - in all my tests, box-shadows are now rendering correctly.

If your comment is about rendering of off-screen elements, please comment over there in the appropriate pull request - and again, it's only helpful if you can give me an example of what's not working.

@SteKama
Copy link

@SteKama SteKama commented Sep 27, 2017

hi to everyone..thanks to eKoopmans that built "this custom build"..but i have a problem with
filter: drop-shadow(5px 5px 5px #222);
i lost it when generate a canvas..how can i do? (sorry for my english language)

@eKoopmans
Copy link
Contributor Author

@eKoopmans eKoopmans commented Oct 17, 2017

Hi @SteKama, really sorry about the long wait! Unfortunately the filter CSS is completely separate and isn't supported right now, see #246 #493. Good luck!

@bastienlemaitre
Copy link

@bastienlemaitre bastienlemaitre commented Nov 28, 2017

Any update for this PR ?

@niklasvh niklasvh force-pushed the master branch 3 times, most recently from 932773c to 1584357 Dec 3, 2017
@eKoopmans
Copy link
Contributor Author

@eKoopmans eKoopmans commented Dec 6, 2017

Not yet merged. @niklasvh, I believe most of the logic should still stand up, but I'm not sure about the particulars of how you've changed clip, renderBorder, etc. Basically the functions I added (mask, renderShadows, and shadow) mirrored the behaviour of the existing clip, renderBorders, and rectangle/circle/etc.

@niklasvh
Copy link
Owner

@niklasvh niklasvh commented Dec 7, 2017

Shouldn't be too hard to integrate this with the rewrite, but I'd rather focus on getting bugfixes done and 1.0.0 out asap before adding any new features.

@Webictbyleo
Copy link

@Webictbyleo Webictbyleo commented Feb 5, 2018

Not rendering when parent of target element is positioned off screen to avoid using {display:none}. Canvas appears blank. I think integrating this fix to the current release will do since it works well there. I think this was fixed because of introduction of iframe in the current release where the target element is cloned into an iframe even of the parent is hidden. Or what do you think

@alex-place
Copy link

@alex-place alex-place commented Apr 4, 2018

Any update on this being merged?

@gaddafirusli
Copy link

@gaddafirusli gaddafirusli commented Jun 27, 2018

Will this be merged anytime soon? Is there a fork out there with shadow support?

@akFace akFace mentioned this pull request Aug 27, 2018
2 tasks
@CPIEmojiMaker
Copy link

@CPIEmojiMaker CPIEmojiMaker commented Sep 12, 2018

When is it going to be merged? Box-shadows are highly used in my project and it would be amazing if it worked someday... @niklasvh

@Vincedream
Copy link

@Vincedream Vincedream commented Sep 16, 2018

emmmm,when will this feature merged?it is a very practical feature!!!

@skullface
Copy link

@skullface skullface commented Dec 2, 2018

+1 to merging this one 🙏

@qbob
Copy link

@qbob qbob commented Jan 16, 2019

+1 to merging this one too 🙏

@liuchouchou0728
Copy link

@liuchouchou0728 liuchouchou0728 commented Jan 16, 2019

+1 to merging this one

var drawShadow = function(shadow) {
var info = parseShadow(shadow);
if (!info.inset) {
context.shadowOffsetX = info.x;
Copy link

@NetroScript NetroScript Mar 13, 2019

Suggested change
context.shadowOffsetX = info.x;
if (info.spread > 0) {
for (var i = -1; i < 2; i += 2) {
for (var i2 = 1; i2 > -2; i2 -= 2) {
context.shadowOffsetX = info.x + i * info.spread;
context.shadowOffsetY = info.y + i2 * info.spread;
context.shadowColor = info.color;
context.shadowBlur = info.blur;
context.fill();
}
}
return;
}
context.shadowOffsetX = info.x;

When the spread is greater 0 you can draw the shape 4 times to simulate the spread. As long as the spread value is not bigger than double of the actual width / height it should work as intended (or better than not handling it at all).
But it is not possible to do negative spread with this method.

Edit: Additionally it might be good to use shadows.reverse().forEach(drawShadow, this); instead of shadows.forEach(drawShadow, this); on line 72, because the browser (or at least Chrome) draws the box-shadow in the opposite order.

Edit2: I forgot to think about opacity (because in my project I had no opacity / blur) so you can probably scratch all of that because it would only work with info.blur=0 and a color without an alpha value

@hakimio
Copy link

@hakimio hakimio commented May 25, 2019

@niklasvh Would you be willing to merge this if I'd integrated it with v1.0.0 and your latest PR ("Typescript conversion")?

@niklasvh niklasvh moved this from Backlog to v1.0.0 in Backlog Sep 30, 2019
@Charlie85270
Copy link

@Charlie85270 Charlie85270 commented Nov 19, 2020

Any update on this being merged?

@hakimio
Copy link

@hakimio hakimio commented Nov 19, 2020

@Charlie85270 PR #1848 was merged. It works to some degree.

@Muneem
Copy link

@Muneem Muneem commented May 1, 2021

its still not working for me

@tonyChenHey
Copy link

@tonyChenHey tonyChenHey commented May 12, 2021

此最新版本box-shadow的渲染還是有問題
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet