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

Conversation

@eKoopmans
Copy link
Contributor

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

eKoopmans added some commits Mar 27, 2017

@eKoopmans eKoopmans force-pushed the eKoopmans:feature/box-shadow branch from c74b2fe to 32b8d1c Mar 27, 2017

@AvanishKumar008

This comment has been minimized.

Copy link

commented Apr 6, 2017

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

@CyberShadow

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link

commented Apr 6, 2017

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

@eKoopmans

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link

commented Nov 28, 2017

Any update for this PR ?

@niklasvh niklasvh force-pushed the niklasvh:master branch 3 times, most recently from 932773c to 1584357 Dec 3, 2017

@eKoopmans

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Owner

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Apr 4, 2018

Any update on this being merged?

@gaddafirusli

This comment has been minimized.

Copy link

commented Jun 27, 2018

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

@kang558 kang558 referenced this pull request Aug 27, 2018

Closed

why not update on merged? #1640

0 of 2 tasks complete
@CPIEmojiMaker

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Sep 16, 2018

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

@skullface

This comment has been minimized.

Copy link

commented Dec 2, 2018

+1 to merging this one 🙏

@qbob

This comment has been minimized.

Copy link

commented Jan 16, 2019

+1 to merging this one too 🙏

@liuchouchou0728

This comment has been minimized.

Copy link

commented Jan 16, 2019

+1 to merging this one

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

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")?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.