JESUS CHRIST FINALLY.
Guys and @.:A-MAN:.
I finally got everything I needed together for that web 2 print solution.
So I found out after digging for days that canvas.toDataURL or canvas.toBlob both output at 72-96dpi. Unacceptable.
I needed an agnostic solution, so I found a client-side JavaScript JPEG encoder. Now if I take a canvas that is 1125px wide by 675px tall, I can take the raw image data and convert it to a base64/BLOB at actual/natural size, and use piexif.js to modify the X/Y resolution fields in the EXIF data so that Adobe Acrobat now says the image is 3.75"x2.25"--business card sized.
All that's left is to make a full editor that can insert shapes, lines, and rasters. And use a 3rd party tool to show guides/aligning tools so people can make things align with each other and center them. Both of which I already know how to do using FabricJS and this alignment tool I found months ago.
New Year resolution: re-learn everything I forgot about Laravel in school. Learn Angular to assist with my web apps. Make the kickass website of my dreams where people can submit print orders, request tech services, and buy products from me.
My front-end game is good, but re-learning Laravel is what I really need to do.
Guys and @.:A-MAN:.
I finally got everything I needed together for that web 2 print solution.
So I found out after digging for days that canvas.toDataURL or canvas.toBlob both output at 72-96dpi. Unacceptable.
I needed an agnostic solution, so I found a client-side JavaScript JPEG encoder. Now if I take a canvas that is 1125px wide by 675px tall, I can take the raw image data and convert it to a base64/BLOB at actual/natural size, and use piexif.js to modify the X/Y resolution fields in the EXIF data so that Adobe Acrobat now says the image is 3.75"x2.25"--business card sized.
All that's left is to make a full editor that can insert shapes, lines, and rasters. And use a 3rd party tool to show guides/aligning tools so people can make things align with each other and center them. Both of which I already know how to do using FabricJS and this alignment tool I found months ago.
New Year resolution: re-learn everything I forgot about Laravel in school. Learn Angular to assist with my web apps. Make the kickass website of my dreams where people can submit print orders, request tech services, and buy products from me.
My front-end game is good, but re-learning Laravel is what I really need to do.
Please Login To Post
Though technically that's not quite correct as there's no one true "RGB", there's only "display a color between the minimum and maximum values my monitor can show" which we refer to as RGB. To rectify this (and make things more confusing as well), there are actually multiple RGB standards such as sRGB (very common) and Adobe RGB. Idk the science behind how they're chosen, but essentially it provides a "real world" quantification of colors with which you can calibrate your monitor so that you're screen's RGB is the same as the real world color space. I think. (Don't quote me on that.)
With all that being said...
To actually answer your question, you technically don't have to do anything. Since a photo is literally just color values from 0-255 for each pixel (compression and metadata aside), a printer typically just maps these values to the range that it is set up to print by default.
BUT that's not to say it will look as good as it possibly could. Ink does weird things that digital images can't do and thus there are different color spaces for printing to try and make your printer print colors more "accurately" (which is, of course, completely dependent on how you define an accurate color). This is where my knowledge falls apart because I have not done much technical stuff with printing images, but hopefully that gives you a starting point to look up stuff as needed.
----------
As a side comment: one way of thinking about RGB vs CMYK is that they literally stand for the components that make the final color. See this image for an example:
Laravel for back-end, AngularJS for front-end.
I plan on giving people the option to print a proof and all before they submit the order of course.
But even with Staples and Vistaprint, if you're designing something online through a screen, it's all RGB when being displayed up until the point of pickup when the person sees the physical product. HTML5 has no CMYK functionality, nor is CMYK a thing in CSS or HTML even.
How do you even design for CMYK if you're using an RGB display? I guess because RGB includes all the colors CMYK can reproduce, you can design for CMYK using RGB. So if I have an upload feature where people can upload their own JPGs or PDFs I guess it doesn't matter then? But the JPG or PDF would be getting converted to RGB once it's put on the HTML5 canvas.
I'm confuzzled.