As I know, standard QR code has securing margin.But I found that many tools that create QR codes without securing margin. And if these QR codes put into dark background, they can't be decoded by many decoders, including zxing QR code decoder. But I did found one QR code decoder can decoder them. I am so curious and I tried to figure out how they do that. I get stuck now. So can anybody help me, give me an idea or a hint?I would appreciate that.
here is a QR code without securing margin.
What those programs do exactly is hard to tell unless you ask their authors directly, but what they may probably be doing is locking onto the inner black squares inside the three corners, instead of locking onto the outsides of the outer borders of those corners. While the outside white border is only fully white when the securing margin is present, the inside white border is always white.
Related
Turns out I’m working with the Autodesk Forge viewer and Three.js, trying to render 2D text that can be interacted with (specifically select, rotate, and move).
To do this I am working with meshes (using MeshBasicMaterial, Mesh and TextGeometry) but it turns out that the text does not look perfectly sharp, it presents aliasing and I found that according to the API reference, the antialiasing is not applicable to 2d.
Here are some examples of the problem, as you can see, the more I move away from the plane, the worse the text looks (and even up close it doesn't look perfect):
I have tried to make a test representing the text with a Sprite (despite the fact that it would mean having to change the entire implementation already made with meshes of other functionalities) but apart from the fact that I cannot see it, I have seen example images and they do not appear either well: aliasing is visible from a distance and it looks really blurry up close. Here some examples:
Is there a way to correct this problem or is this the most I can get in 2D? I've tried searching for information on this but can't find anything helpful. And what has puzzled me the most has been realizing that antialiasing was not applicable in the case of 2d, like making it clear that nothing can be done to fix it.
I would be very grateful if you could solve my doubts, thank you very much in advance for your help.
An easier alternative, is to just use a higher pixel ratio for the renderer...
window.devicePixelRatio=2;
viewer.resize();
For example, using the custom geometry text, from Joao's demo, you can see the same aliasing issue at DPR=0.5 and DPR=1.0 ...
https://joaomartins-forge.github.io/textgeometry-sample/
But when I set the DPR=2.0, the text looks clean. The trade off is rendering performance, but your 2D drawings may be simple enough that it won't matter. You can use a 'mouse up' camera settle trick, to switch between DPR of 1 and 2, if you want a better UX experience.
There are a few ways to solve this aliasing issue for 2D (and 3D text).
The way I would recommend for your use case, is to use DIV elements (THREE.CSS3DRenderer), instead of text converted into three.js tessellated triangle geometry, as shown in this blog post:
https://forge.autodesk.com/blog/how-do-you-add-labels-forge-viewer
You can find out more information about THREE.CSS3DRenderer here:
https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer
and an Example here: https://threejs.org/examples/#css3d_periodictable
Using CSS3DRenderer instead of CSS2DRenderer, means you will get the correct scaling (and rotation) of the div element as you zoom into your 2D drawing and the mathematics inside the calculation for the matrix transform has less edge-cases.
Once you are using DIV elements for your text, you will notice that the text is sharper and has no aliasing issues. That's because it is not being rasterized by the webGL pipeline, but by the SKIA library used by chrome/firefox/opera/etc for rasterizing text.
There is one final option, that uses signed-distance fields, but it's probably overkill for what you need.
Let me know if you want some example code.
I had got a requirement to create a QR code with a logo at the center, so first I thought it may require some different library.
For experiment, I just put a logo using Illustrator at the center on the provided QR code and the scanner was able to read it. I used black and white both bg below logo, still it was reading correctly.
So my question is: if I put a logo within the center of any QR code, will it work fine or should I use a library for this matter?
All QR codes with an image or logo in the center take advantage of the fact that the QR code contains redundant information so it can still be decoded despite poor image quality or poor printing. This is part of the error correction.
The QR code standard does not have any explicit facility for making room in the center for an image.
Thus, your approach is perfectly fine. Any other QR code library would do the same: generate the QR code and then add an image in the center.
To ensure that the QR code can still be successfully scanned, it is advisable to use the higher error correction levels if possible (level Q or H instead of M or L).
Yes is is safe to put a logo on any QR code at center. QR Codes only use the 'outsite dots' to process the information.
If you want you can create a QR Code with a logo online, there are a bunch of websites that let you do that quite easly. For example:
qrty let you create a qr code and put your logo inside it!
I am using http://achecker.ca to validate my HTML/CSS and verify that I am WCAG 2.0 compliant. I'm quite happy with it for the most part but it is giving me an inappropriate error that is frustrating my efforts to get a clean validation. I was wondering if anyone had a suggestion for getting around that?
It's complaining about the contrast of some text I am displaying, saying that the background color and the text color are too similar. That's actually true - background-color is #f2eecf and text color is #f2f2f2 - but it isn't really relevant because I have a photograph appearing above the background color so there is actually good contrast between the photograph and the text color. Also, I've added a 1 pixel black text-shadow around the text to make it even clearer. Unfortunately, the tool doesn't seem to take the shadow or photograph into account. (It makes sense that it wouldn't know how to handle the photograph since it is not a uniform colour but I'm disappointed that the text shadow doesn't help.)
Is there something I can do to my HTML or CSS to help satisfy the tool? The website doesn't seem to have any way to contact the people operating the website or I would have asked there first.
Should I just ignore the "errors"? Or should I use a different tool? I'm just getting started with WCAG compliance checking - I realize now that I'm rather late getting into this - so maybe there are better tools to use. If so, I would appreciate any recommendation, especially for free tools.
I certainly want my pages to be WCAG compliant but I can't spare money for tools right now.
I have a photograph appearing above the background color
So your text has a transparent background color or it has a background-image? A code snippet would help.
I'm guessing you're getting this error: https://achecker.ca/checker/suggestion.php?id=301
If you look up "achecker.ca" on https://www.whois.net/, you get:
Administrative contact:
Name: Iris Neher
Email: ineher#ocad.ca
If you're using a decent accessibility checker, then you should not try to fake out the checker. I have not used achecker so I can't comment on how accurate it is. But if you post your code example, I might be able to tell if it's really a problem.
You can also try
http://www.brandwood.com/a11y/ - which specifically checks text on images.
https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en - chrome plugin
Short Answer:
Best practices is that if you are going to composite text over an image, the image is in a container with that container having a background similar to the image.
Longer Answer:
There are a variety of reasons that an image will not load. A site doing things such as placing live text over an image needs to ensure that text remains readable regardless of the load state of the image.
Also keep in mind that a user must be able to zoom up the text in size without breaking the site, meaning keeping the text over the image or BG so it is still readable, etc.
Outlines & Shadows
As for outlines and shadows: while they may assist contrast, they should be used to enhance and not for the sole basis of contrast. In part because the rendering of these properties is far from consistent among different browsers.
Resources
WAVE Automated Checker
APCA Contrast — the new contrast method for WCAG 3
I would like to know how I can create a colored canvas but with transparent parts with the font. I want the font to create a hole in this canvas. Is this possible and how ? My goal is to create the impression that an image is embbed in a font...
Thank you :)
<canvas> offers something called composite operations for cut off and such effects. I believe the operation you want is called destination out:
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
And here is some more technical details in the spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing
I cannot provide you an actual working code (your use case is pretty rare), but you should be able find a globalComposite tutorials and with little playing with their code you can find out how to apply the operation for your case.
We are desperate to convert an image so that it can be used as an image map. Everything I have tried, really doesnt cut the mustard. I havent the experience to work at very high resolutions.. plus I dont know the terminology and neither have the skills or resources to invest in learning how to do this, knowing many others on here and the internet have far greater experience.
I have downloaded and played with Inkscape, but really am going round in circles...
So thought I would ask here.
What I am after is similar to Raphael Australia Map or David Lynchs, http://davidlynch.org/js/maphilight/docs/demo_usa.html
No frills, no effects, just change the state color of the map on hover and retain that event on click.
Here is what we have ...
What we have is a MAP like this.
We lost the original file, which was pure gray. I have this left :(
Anyway, we want it so that each state ( including the territory ACT ) not indicated on the above map, represented in pink #ec008c . On hover
Map needs to be FLAWLESS !! Also require that any imagery must be png and transparent bg.
Must remain exact size as above. Must be extremely accurate on svg coordinates, and optionally would like the STATE text to appear , like the QLD is shown on the image above, but not wholly necessary.
Can anyone point me in the right direction please.
Have you tried Path > Trace Bitmap in Inkscape? If you play with the settings you should be able to get a decent vectorised image.
Vectorised:
EPS:
http://dl.dropbox.com/u/13402937/Australia.eps
Adobe Illustrator:
http://dl.dropbox.com/u/13402937/Australia.ai
try to use this tool, its the potrace part to trace pixelpictures in inkscape with many features. potrace traces pictures from commandline
I have obtained extraordinary results with https://vectormagic.com/ , which can be tried online.