Jump to content

AARRGGHHH

Members
  • Posts

    55
  • Joined

  • Last visited

Recent Profile Visitors

1,527 profile views

AARRGGHHH's Achievements

Newbie

Newbie (1/7)

1

Reputation

  1. I tend to lean toward PNG as well, since the compression is lossless (no data is lost). One observation worth noting is that PNG basically assumes your visitor is using broadband (most people are), since PNG images can be too large for slow connections. JPG is certainly still usable, providing you choose your settings wisely. A quality setting of 80 to 95 is usually best, less than 80 tends to produce poor results, greater than 95 is unnecessary, since it tends to increase file size without improving quality. If you have hard edges in your image, such as text, be sure to turn subsampling OFF (sometimes called "444"). Subsampling compresses by averaging color values of neighboring pixels, if an image has hard edges, such as text on a background, the neighboring pixels may have very different color values, averaging those values will produce artifacts. It always bothered me that Photoshop did not have a subsampling option. I'm not an adobe fan, does anyone know if they ever added that option?
  2. Just to make it more painful: I fixed it last night. Then looked at it half asleep and broke it. And I can't remember how I fixed it.
  3. I'll certainly post that if needed, but I think I found the problem, after stepping through all 700+ lines of code. This line is blocking the SVG filter: if (document.getElementById("cPreview") != null) document.getElementById("cPreview").style.WebkitFilter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)" + " saturate(" + parseInt(percentS) + "%)"; That line was only there for backwards compatibility with older browsers. Commenting that line blocks the CSS filters (brightness, contrast, etc..) but allows the SVG to work. If I change style.WebKitFilter to style.filter, the CSS filters work, but the SVG stops working. So the question becomes how do I add the SVG filter to that line of code? I tried this with no luck: if (document.getElementById("cPreview") != null) document.getElementById("cPreview").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " svgCOLOR(value)" + " saturate(" + parseInt(percentS) + "%)"; Apparently "svgCOLOR(value)" is not the proper way to reference the SVG filter. So... how do I add the SVG filter to that line of code? Thank you!
  4. I'm not sure what you mean by a "use case" example. Please let me know!
  5. Hi Ingolme Thank you once again! I was away for a while due to the holidays and an illness in the family. For some reason, the SVG filter is not being applied to the canvas cPreview, but is being applied to the canvas cSave. Do you have any thoughts on why this may be happening? Here's my code: <style> #cSave { filter: url("#svgCOLOR"); } #cPreview { filter: url("#svgCOLOR"); } </style> <!-- SVG Declaration --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="2" height="1"> <defs> <filter id="svgCOLOR"> <!-- Matrix values will eventually be adjustable using a range slider control --> <feColorMatrix type="matrix" values="2 0 0 0 0 0 1 0 0 0 0 0 2 0 0 0 0 0 0 1" /> </filter> </defs> </svg> <!-- CANVAS cPreview --> <canvas id="cPreview" width="2" height="1" style="position:relative; max-width:100%;"></canvas> <!-- CANVAS cSave --> <canvas id="cSave" width="2" height="1" onclick="clickPreview()" style="position:relative; max-width:100%;"></canvas> Thank you!
  6. I've been experimenting with various models for edge detection in an image. Everything I've tried reduces the image to grayscale. How do I perform edge detection with an SVG Sharpen Filter and preserve the image's underlying color? Here's a sample of the effect I'm looking for: Thank you very much!
  7. Thank you once again! Neither worked, but I'm still trying different things to see if I can make it work. I've read <foreignObject> is needed, I'm not really sure. What I'll ultimately be doing is combining CSS and SVG filters to make changes to an image. This uh ... this can be done, right? I would think (hope) that canvas.filter will hold all the applied filters, not just the multiple CSS filters. Please let me know if you have any other thoughts on applying the svg filter attribute. Thanks again!
  8. Just a thought, it's almost as though there's nothing "connecting" the table data and canvas to the filter. But I could be way off on that.
  9. Thank you so much. Unfortunately, I'm still getting something wrong. The canvas is showing up first, as it should. The SVG is showing up under the canvas. I tried wrapping it in <foreignObject> tags, but that did not help. Also, the table that the canvas should exist in is outside of the canvas. I have a feeling I missed something simple. ... <td id="tdSave" style="width:100%; border-style:none;"> <!-- START NEW SVG CODE --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> <defs> <filter id="xPurple"> <feColorMatrix type="matrix" values="2 0 0 0 0 0 1 0 0 0 0 0 2 0 0 0 0 0 0 1" /> </filter> </defs> <foreignObject> <html:canvas id="cSave" width="400" height="200" onclick="clickPreview()" style="position:relative; max-width:100%;"> </html:canvas> </foreignObject> </svg> <!-- END NEW SVG Code --> </td> ... Screen Shots (hope this helps) are below. Many Thanks !!!
  10. I will try that, thank you VERY much. Will it be possible manipulate the SVG filter's values (for example, a feColorMatrix or feConvolver filter's matrix values) with JavaScript in my HTML page? Thanks again!
  11. Thank you for the reply! SO what you have in mind is: <script> svgfile() </script> And svgfile() is a function in an external file. How do I get the main page to load the filter from the external page? One potential complication: There will also be CSS filters working in the main page. How can I get the .filter property to accept both CSS filters from the main page, plus SVG filter(s) from the external page? Thank you! PS: On this page https://www.w3.org/TR/SVG2/embedded.html I found this: Which would seem to imply that a canvas tag can be placed within an svg tag. They gave a simple example for video (above), but not for canvas. Based on that example, I tried this: <canvas id="cSave" width="400" height="200" onclick="clickPreview()" style="position:relative; max-width:100%;"></canvas> <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> <defs> <filter id="darkGreen"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> <html:canvas name="cSave"> </html:canvas> </svg> Which should create a dark Green color cast. But all I got was an empty canvas. Do you think this <svg> inside <canvas> can be made to work? Thanks again!
  12. I've seen this (and similar) code used to apply an SVG filter to an image. How do I use this code to apply an SVG filter to a canvas? The canvas' content may change often. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="darkGreen"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> <image xlink:href="(url to image)" width="" height="" filter="url(#darkGreen)" /> </svg> Thank you
  13. CSS and SVG filters can be used to change the appearance of an image on a canvas. However (with CSS at least, I assume it is the same with SVG) the image is not actually changed, just the display of the image is altered. To change the image, you have to copy it to a new canvas and apply the old canvas as a filter: var cP = document.getElementById("cPreview"); var cntxCP = cP.getContext("2d"); var cS = document.getElementById("cSave"); var cntxCS = cS.getContext("2d"); // take whatever CSS filter(s) is/are applied to the first canvas var cssFilter = getComputedStyle(cP).filter; // use that filter as the second canvas' context's filter cS.width = cP.width; cS.height = cP.height; cntxCS.filter = cssFilter; // This changes the image, instead of just changing the display of the image. EXCEPT iOS... "Compliance" is still just a fantasy at Apple... My question is, once a combination of CSS and SVG filters have changed the appearance of an image, what steps have to be taken to apply those changes to the actual image (as was done above with CSS alone). Please provide sample code, as I'm completely new to SVG Filters. Thank you!
  14. Changing to absolute or block , or removing the position entirely, just creates different problems. There's no way to " Just put it in at the ´╗┐bottom of the page." since the location of the bottom will vary based on screen resolution
  15. This CSS does a good job of keeping the footer at the bottom of a page. https://www.w3schools.com/howto/howto_css_fixed_footer.asp The problem is that the footer is always visible. I'd like the footer to only be visible when the user has scrolled to the bottom of the page. Suggestions? Thank you
×
×
  • Create New...