Looking at the source code for BinaryThreshold in the ImageSharp library, there are properties for the upper and lower threshold colours BinaryThresholdProcessor.cs.
I'd like to make an image that instead of having a white background, has a transparent one for the lower threshold. If I had access to these properties I could do that. Is there any way?
Thanks.
You're absolutely correct. The underpinnings were there for allowing such behaviour but the functionality was not enabled.
On the back of your question I've updated all the thresholding/dithering code in the library to allow what you need.
https://github.com/SixLabors/ImageSharp/pull/456
Once merged, this will be in the nightly builds available from Myget. We have a beta3 scheduled very soon for Nuget also.
Related
I use awesomewm and have a small conky configuration on top of my wallpaper with transparent background. Now i have the idea to change the behaviour of awesomewm to let this small area untouched. So when maximising a window (client?) or when arranging them, this small area must be completely free. I tried to add a second wibar on the right side, changed the width and made it transparent. But all i got was a transparent sidebar which shows the background but not the informations comming from conky.
Is it possible to stack two transparent components over the wallpaper? which configuration whould be the best? Is there a better way to reach my goal?
I use Manjaro with awesomewm. I can post configs if needed.
Thanks, Andreas
If you want "true transparency", you need to run a composite manager like xcompmgr, compiz or compton/picom. These are just random examples and all links point to the arch wiki. On Xorg#Composite, it also lists unagi as a possibility, but the wiki does not have a page for it.
Without a composite manager, "fake transparency" is used. Transparency is simulated by taking the wallpaper and drawing that as the background of the wibox. From your description, it sounds like this is what you are seeing.
I am working on a project where we have designers that work in Adobe RGB and are used to seeing the more vibrant colors from that spectrum in Illustrator. However we have been building an application that will allow them to do their work in a web browser using a THREE JS 3D workspace.
Because we have been creating the color swatches using CSS background color and applying RGBA to the meshes in THREE we have been displaying everything in sRGB, and now the designers are complaining the colors don't seem right in the browser.
I know that current versions of Chrome support color management for images but I can't find any information about CSS or Three JS. Does anyone know if it's even possible to control the color profiles for these areas, or are we just going to have to live with sRGB?
We have the very same problem, i found no way to control the CSS Colors. I think this will maybe change with the mediaQuery keyword, but I did also not found out if it will affect CSS colors.
http://furbo.org/color/ResponsiveColor/
We only need a special set of colors so now we store them in a texture and make a lookup, but I guess this is no solution for you.
Is your destination the web? Then Adobe RGB is not presently supported, and is not recommended.
The Standard for the Web is sRGB
The W3 defined the standard for web content as sRGB. In the future, CSS4 will support other colorspaces. Right now? Stick with sRGB.
Chrome, and most browsers do not support any color management for CSS. Safari is the only one I know that does, at least without tweaking some internal experimental options on the others.
When possible, I suggest working in the destination space (though possibly working at a higher bit depth) then there will not be these kinds of "surprises". In the interim, you might try converting the existing work from AdobeRGB to sRGB using "perceptual intent" or "relative colorimetric".
Also, you can find the docs for CSS here:
https://www.w3.org/TR/css3-roadmap/
It is not possible now, but it will be possible in the future when draft specification from W3C will come into browsers... (https://drafts.csswg.org/css-color/)
It is now already possible in latest Safari of MacOS BigSur. There is even a special test here.
Console in Safari also has Color managed color picker.
I'm building an application, which is cross-platform (Linux, Win, OS X), and especially does graphics stuff via Cairo(mm), supported by a little bit of GTK+ scaffolding (i.e. DrawingArea). I now need some UI elements, which require a certain custom look. Ideally they should also be displayed as transparent overlay (i.e. different opacities for different parts of the UI).
As GTK+ is hard to customize (e.g. I want an edit-field with the suggestion-list above it), and me basically exactly knowing how I'd achieve this with HTML/CSS, the question popped up: Why not just let libwebkit handle the UI stuff?
I don't have much experience with WebKit, so what I need to know is:
Does my above reasoning make sense to anybody else?
CSS has opacity, can I interface WebKit in such way that it renders onto an RGBA-offscreen surface, with alpha-values inherited from the layout-processing of the CSS styles?
Even if 2. would not work, has anybody used libwebkit on an offscreen surface, which AFAIK requires redirection of keyboard and mouse interactions, probably via GTK+s provisions?
Is it possible to render web content over a clear background using WebKit?
is probably as good as it gets.
Does anybody know of a good way to replicate Photoshop's multiply layer mode using either an image or CSS?
I'm working on a project that has thumbnails that get a color overlay when you hover over them, but the designer used a layer set to multiply and I can't figure out how to produce it on the web.
The best thing I've come up with is either using rgba or a transparent png, but even then it doesn't look right.
There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode.
Currently, you won't be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly.
These properties are set up to work nearly exactly the same as photoshop's blending modes, and allow for various different modes to be set as values for these properties such as overlay, screen, lighten, color-dodge, and of course multiply.. among others.
blend-mode would allow images (and possibly content? I haven't heard anything to suggest that at this point though.) layered on top of each other to have this blending effect applied.
background-blend-mode would be quite similar, but would be intended for background images (set using background or background-image) rather than actual image elements.
EDIT:
The next section is becoming a bit irrelevant as browser support is growing.. Check this chart to see which browsers have support for this: http://caniuse.com/#feat=css-backgroundblendmode
If you've got the latest version of Chrome installed on your computer, you can actually see these styles in use by enabling some flags in your browser (just throw these into your address bar:)
chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders
* note that the flags required for this might change at any time
Enable those bad boys and then check out this fiddle: http://jsfiddle.net/cqzJ5/
(If the styles are properly enabled in your browser, the two images should be blended to make the scene look like it is underwater)
While this may not be the most legitimate answer at the current moment due to the almost entirely nonexistent support for this feature, we can hope that modern browsers will adopt these properties in the near future, giving us a really nice and easy solution to this problem.
Some extra reading resources on blending modes and the css properties:
http://blogs.adobe.com/webplatform/2013/06/24/css-background-blend-modes-are-now-available-in-chrome-canary-and-webkit-nightly/
http://demosthenes.info/blog/707/PhotoShop-In-The-Browser-Understanding-CSS-Blend-Modes
http://html.adobe.com/webplatform/graphics/blendmodes/
Simple with a bit of SVG:
<svg width="200" height="200" viewBox="10 10 280 280">
<filter id="multiply">
<feBlend mode="multiply"/>
</filter>
<image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>
and some CSS:
#kitten:hover {
filter:url(#multiply);
}
The fiddle: http://jsfiddle.net/7uCQQ/381/
Just for the record, this guy is developing a library to do so. I just came into it while doing a research, haven't tried yet.
https://github.com/Phrogz/context-blender
It is possible with a 24.png - if you know the trick.
In illustrator you can export the graphic as a 24.png, but this never seems to work like multiply.
I've found away.
get your multiplied graphic on its own
place a solid black 100% box behind it, and select both graphics
in the transparency window select 'Make Mask' and then 'Invert Mask'
export as a 24.png file
works just like a multiply when z-index(ed) on top of a picture.
No such ability is available. The only compositing options you get that are even close are:
lighter compositing mode on an HTML5 <canvas> (which is a+b not a*b, and has about the opposite effect to multiply)
min or subtract Compositor filters in IE only.
Neither are really practical.
In general you should not attempt to export Photoshop comps as layers, but render them down to a single opaque image. For rollovers you can make two images (one for normal state, one for hovered) and swap between them using the CSS :hover style to choose a different background image, or—better, as it requires no preloading and reduces HTTP requests—combine both images into one and use background-image/background-position to display the right part of that image in each state as a background image. (“CSS sprites”)
I recently had the need to do exactly what the OP asked so I searched around. I found a great way to replicate the multiply effect by making a transparent PNG in Photoshop.
Create a new document with the same dimensions of your multiply
layer.
Fill the document with black.
Add a vector mask (the icon to the left of layer "fx" at the bottom of the layers window).
Alt/Option + click on the mask itself.
Now copy and paste your multiply layer into the mask.
Cmd/Ctrl + i to invert the layer you just pasted.
Create a new layer below this layer and add the image behind the multiply overlay.
Everything should look pretty close to your desired result. If needed, you can adjust the opacity of the masked layer we created.
When it looks good just toggle the bottom layer's visibility and save the masked layer as a PNG et voila!
All credit goes to Sojeong from https://superuser.com/questions/381704/multiply-blending-mode-to-png
Check this out:
http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html
Using those instructions, I had great success watermarking a black-and-white image (ink drawing in my case, with blacks and greys on a solid white background) onto a dark background (wood in my case). There is hardly any difference with the real Multiply filter of Adobe.
I used the Photoshop instructions to remove the whites from my image, leaving only blacks and greys on a transparent background. Saving this to PNG and putting it on the wood in CSS/HTML still lookedmuch worse thanmultiply, but strongly reducing the brightness of the PNG solved it (the light greys stood out before, making it ugly).
In general I recommend you play around in photoshop, replicating the web situation: a semi-transparent (no special stuff) layer on top of a solid background. Tutorials such as the above may allow you to reproduce multiply or other fancy effects.
Not sure if you will have any luck. As far as I know, it isn't possible even if you tried to integrate some advanced JavaScript with it.
A customer has asked us to a add a feature to his website allowing visitors to colour in panels in a simple line drawing.
The website visitor will have a limited palette to choose from and will select a colour and click in a shape within the line drawing to colour it in as in:
There will only be four or five of these line drawings. The drawings themselves are not required to be interactive or flexible, only the colouring.
The line drawings will be super simple and we don't need to save the visitor's selections although the visitor will want to print or email the result.
Simple simple stuff. Most of the time where you see this done on sophisticated websites I assume it's done with Flash.
But is Flash the only way to go? Or can it be done with JQuery/Javascript or Silverlight or something else? Our team's knowledge covers ASP.NET, HTML, CSS, Javascript. No experience of Flash.
If you have a finite number of line drawings, and a limited number of colours, you could just pre-generate every possible colour/section combination - isolate each area as a transparent GIF/PNG and composite them using position:absolute to create an "onion skin" / animation cel effect. Use some old-school HTML image-map code (or server-side parsing of the myimage.X / myimage.Y parameters, or jQuery) to work out where they clicked, identify the image section under the mouse click location, and replace that image only with the corresponding version in their selected colour.
You can't draw these kinds of shape without using canvas or SVG. And I am not sure about the support provided by browsers for these.
If you can go for canvas then you ca ntake a look at
Processing js library
or for SVG
Raphaël—JavaScript Library
There are only two ways i can think of atm:
Split the line drawings into the colourable elements and show each image absolutly positioned to merge the images into one on the website.
Use Javascript to load a pre-coloured image of that part with "onclick" (or generate a coloured version with asp/php/whatever server-side.
Not sure if it's possible to print absolute positioned elements cleanly.
Use flash, it's simple there so even without experience you should be able to do it in 1-2 workdays.
My guess is that you could use the new HTML 5 canvas element to achieve this goal in an open, standards compliant manner.
Note: canvas is a new feature and is only supported in recent browser releases (latest Safari, Firefox or Chrome for example).