Commit abc58c4b authored by julien's avatar julien
Browse files

add dpi canva and profile

parent f0c5cd07
Pipeline #920 failed with stage
in 2 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<link rel="stylesheet" href="../css/interface.css">
<style>
section {
break-before: page
}
img {
width: 10cm;
auto: 10cm;
}
.cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.cols img {
width: 100%;
}
</style>
</head>
<body>
<section>
<h1>on color profiles</h1>
<p>Chromium will convert the images to the screen profile, and when printing, will keep them as rgb </p>
<p>test: <a href="https://www.color.org/version4html.xalter">https://www.color.org/version4html.xalter</a></p>
<p>you can force srgb ouput: <a href="chrome://flags/#force-color-profile">chrome://flags/#force-color-profile</a></p>
<p>When printing, these images will be set as DeviceRGB, using whatever profile the screen is set on.
We need to test that on windows and linux.</p>
<p>This will get better when we have access to css4 color @profile (<a href="https://www.w3.org/TR/css-color-4/#at-profile">https://www.w3.org/TR/css-color-4/#at-profile</a></p>
<ul>
<li>The output rgb pdf is coherent</li>
<li>Since there is no cmyk images in the output</li>
<li>the conversion to cmyk is done by the printshop who actually knows what profile/settings he needs</li>
</ul>
<p>we need to find a printshop who want to work with us on that bit.</p>
<h2>source material sRGBz</h2>
<img class="source" src="../images/mika-baumeister-gjPSrg4xSNM-unsplash.jpg" />
<p>picture from noemi jimenez from <a href="https://unsplash.com/photos/gjPSrg4xSNM">unsplash.com</a></p>
<p>profile: 'c2' (source: <a href="https://pippin.gimp.org/sRGBz/">https://pippin.gimp.org/sRGBz/</a>)</p>
</section>
<section>
<h2>coverted to fogra 39</h2>
<img class="fogra" src="../images/mika-baumeister-gjPSrg4xSNM-unsplashFOGRA39.jpg" />
<p>profile: 'fogra39 CMYK'</p>
</section>
<section class="cols">
<div class="col">
<p>c2</p>
<img class="source" src="../images/mika-baumeister-gjPSrg4xSNM-unsplash.jpg" />
</div>
<div class="col">
<p>fogra39</p>
<img class="fogra" src="../images/mika-baumeister-gjPSrg4xSNM-unsplashFOGRA39.jpg" />
</div>
</section>
</body>
</html>
\ No newline at end of file
......@@ -30,6 +30,10 @@
}
</style>
</head>
<body>
......@@ -87,6 +91,7 @@ page num type width height color comp bpc enc interp object ID x-ppi y-pp
<img class="quarter" src="../images/7b4caa925f7247a12d20dfac194613f9.jpg" alt="">
</section>
</body>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root {
--print-res: 100;
}
section {
break-before: page;
}
@page {
size: A4;
margin: 5mm;
}
img,
canvas {
width: 10%;
}
</style>
<script>
class dpi300 extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
beforeParsed(content) {
content.querySelectorAll("img").forEach((img, index) => {
img.id = img.id ? img.id : `img-${index}`
})
}
afterRendered(pages) {
// get the value of --print-res to use as output printing
let rez = getComputedStyle(document.body).getPropertyValue('--print-res');
document.querySelectorAll(".dpi300").forEach(img => {
imageDPI(img,rez)
})
}
}
Paged.registerHandlers(dpi300);
function imageDPI(image, wantedDPI = 300) {
let dpi = document.createElement('div');
dpi.id = "dpi"
dpi.style.width = '1in';
dpi.style.height = '1in';
dpi.style.position = 'fixed;'
dpi.style.display = 'block;'
document.body.insertAdjacentElement('afterbegin', dpi)
// let image sizes`
console.log(`image.offsetHeight`, image.offsetHeight)
let imageSize = {};
imageSize.sourceWidth = image.naturalWidth;
imageSize.sourceHeight = image.naturalHeight;
imageSize.usedWidth = image.offsetWidth;
imageSize.usedHeight = image.offsetHeight;
imageSize.dpisource = document.querySelector('#dpi').offsetWidth;
imageSize.dpiFactor = wantedDPI/imageSize.dpisource;
document.querySelector("#dpi").remove();
console.log(`imageSize`, imageSize)
let canvas = document.createElement('canvas')
canvas.style.width = imageSize.usedWidth + 'px';
canvas.style.height = imageSize.usedHeight + 'px';
image.replaceWith(canvas)
canvas.id = image.id
let imageWidth = canvas.offsetWidth * imageSize.dpiFactor
let imageHeight = canvas.offsetHeight * imageSize.dpiFactor
canvas.setAttribute('width', imageWidth );
canvas.setAttribute('height', imageHeight );
canvas.style.width = imageSize.usedWidth + 'px';
canvas.style.height = imageSize.usedHeight + 'px';
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, imageWidth, imageHeight)
}
</script>
</head>
<body>
<h2>The quest for 300dpi</h2>
<p>from https://stackoverflow.com/questions/19754961/print-canvas-contents?noredirect=1&lq=1</p>
<pre>/// conversion factor for scale, we want 300 DPI in this example
var dpiFactor = wantedResolution / screenResolution;
/// set canvas size representing 300 DPI
canvas.width = width * dpiFactor;
canvas.height = height * dpiFactor;
/// scale all content to fit the 96 DPI display (DPI doesn't really matter here)
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';</pre>
<p>With that, we manage to recreate the image at 300DPI using canvas, and define in the css the resolution we need to output:</p>
<pre>
:root {
--print-res: 100;
}
</pre>
<p>here is the resutl</p>
<pre>
page num type width height color comp bpc enc interp object ID x-ppi y-ppi size ratio
--------------------------------------------------------------------------------------------
3 0 image 3864 3864 rgb 3 8 jpeg no 10 0 4950 4950 2187K 5.0%
4 1 image 79 79 rgb 3 8 image no 13 0 100 100 14.8K 81%
</pre>
<p><a href="../output/dpi300CanvasQuest.pdf">Check the pdf!</a></p>
<section>
<p>100% of the A4 page</p>
<img class="hundred" src="../images/7b4caa925f7247a12d20dfac194613f9.jpg" alt="">
</section>
<section>
<p>100% of the A4 page</p>
<img class="hundred dpi300" src="../images/7b4caa925f7247a12d20dfac194613f9.jpg" alt="">
</section>
</body>
</html>
\ No newline at end of file
......@@ -26,6 +26,9 @@
<li>how to make column break work in a multicol book <a href="examples/column-break.html">by adding margins on the fly</a></li>
<li>change size between <a href="examples/font-size-changes.html">using @media print</a></li>
<li>Ask yourself questions about PPI and images resolution from the browser <a href="examples/dpi.html">DPI.html</a></li>
<li>Use canvas to regenerate images as 300 dpi using canvas <a href="examples/dpi300-canvas.html">and changes DPI</a> on the fly in the css</li>
<li>Ask yourself questions about color profiles in the browser <a href="examples/color-profiles.html">color profiles in the browser</a></li>
<li>DO NOT USE YET Weird hack in progress for column break <a href="examples/column-break.html">column break</a></li>
</ul>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment