Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral


  • Rank

Recent Profile Visitors

1,439 profile views
  1. 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!
  2. 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!
  3. 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.
  4. 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"> <
  5. 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!
  6. 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 ta
  7. 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
  8. 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
  9. 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
  10. 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
  11. No need for concern, this is one I will not forgot! Thank you for the additional info. :)
  12. That was the problem !!! Thank you so much, dsonesuk. The corrected code is below: function click5() { document.getElementById("preview").style.visibility = "visible"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; //This could also be updated if needed. // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext(
  13. I will try that next Ingolme, thank you very much. I have a feeling, since the page is not triggering any errors in the iPhone "Inspector" app, it may not trigger any errors here either. But it's definitely worth a try. Errors like this are how I chose the name AARRGGHHH. 😡
  14. This requires a Mac, correct? Unfortunately, I do not have one. I have run the file on iOS (on my iPhone) in Chrome, Firefox, and Safari, and the problem appears the same in all three browsers. The iOS "Inspector" app, which usually points me in the right direction, shows no errors, and its built in browser (I assume Safari) also displays the same lack of a canvas.
  15. This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be. function click5() { document.getElementById("preview").style = "visibility:visible;"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPrevie
  • Create New...