Skip to content

Commit

Permalink
Update KOHAmera.html
Browse files Browse the repository at this point in the history 
* New Feature: File size estimation
* New Feature: Adjust quality to target file size
* New Feature: Status dialog

File size target can be adjusted in source by default set to 100Kb
  • Loading branch information
@Swizzler121
Swizzler121 authored Nov 7, 2018
1 parent 37b5399 commit e2a956d
Showing 1 changed file with 67 additions and 14 deletions.
81 changes: 67 additions & 14 deletions KOHAmera.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8"/>
<title>KOHAmera</title>
<!--version 2.0.2 updated 10/31/2018-->
<!--version 2.1.0 updated 11/06/2018-->
<!--===========================================================================================
CREDITS
-----------------------------------------------------------------------------------------------
Expand All @@ -12,32 +14,38 @@
Script help by
http://youmightnotneedjquery.com/
https://www.kirupa.com/canvas/follow_mouse_cursor.htm
https://medium.com/@heatherbooker/how-to-auto-scroll-to-the-bottom-of-a-div-415e967e7a24 < Div Autoscroll
and other sites helped with previous versions before the rewrite
============================================================================================-->
<link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goLEiUdnr5EqQAABZ9JREFUWMPtll1sFNcZhp/vzMzO7trs2oudOFmzTjA1oYWYUFALJAhKFQgItwmV6I/aiqsgRU3pRa8ipWpVVb1oe1NV4aJSKqpS9QL1D3xj3BKwqggqgQkGVzYEY4yNvTbZ9e56Z2ZnTi/Wdtc1aztVo0pVjjSa0cw53/POd77zngMft/9xk7mHp7/9E+JPtX1XibxS8d33tf5+73c6uj4qAcb8kzujrA2fOekGepPrB82zV8or+V6q7ZN/Grt8/qPLwJe6R1JZ1/9N0fO3IxWigCDQjhhmXuS/B40YcqPWUl87vTd514zvOMDtzMwbvmE9Dwr0ov42vrb//WWLJbSGFQC3igFDXlA5o49sllPAs6NkSvp5o+C80fjyq6+apcwkrlNsNqLWssrXhYSvrwnT3hhidUQt+DY549M77vDr4SKD3mIhT753nth7nWQ3HeD+pt24TrHZmxzD1CVvRWl7LRnii61RwkY5eC6Xo1AoAFBTU8Pqmho+1xJlRzLCHwan+cX9ElTMW3j8dsV9NwC65GGuBP6DdRH2rAmjtaavr4/Ozk56e3tRSiEiaK3ZunUr+/btY/369Xz5mRiPR3K8OeiAKmfqwbYO4sOfILNmw4LYywp4PRliz5owruty6tQpuru7sSyLcDiMVPzhtWvXuHLlCvv37+fw4cPsaanlW3mPn49pECEfayD/qRcWxV9SwAZb6GiNEgQBJ0+epKenB9u2EauWaNtBrPoW0AHFiUGcwU5M8ejq6kJrzZEjR/hCW5yu0fv0S01VhlpKwDdSNrYhXL16lQsXLmCaJkHdc8Rf+hnxza8Qbfk00ae2kdj2FSKf/yl+ZC0iwrlz5+jv78c2Fd9sscEt/icCNM822mitOX36NJZlQWg1attrRFfFF/Wua3wM57njIBYiwtmzZwF4NhlH8hnE9z6cgM1hRcxWpNNphoeHUUpRSL5MtHZVVck1iccoNh0AoL+/n0wmQywSoj0iGO4M6hEiqgpoDpULLJ1OYxhlcyzG1xLo6jkLNLixdWWLFSGTyZRj2YIApueggtLKBMi8FQf/qnYxeDhTHZ4ugBZVYePBwh1PwCo5GNpfXsADrzw4kUigdfm37ekhporwILvQsQMNww/B8SE0PTT/PhaLATBeLCEiiAhKFHbgYWkfQVdfhpfzAXk3oLGxkUQiQTabJXrvz2SbPsvdrE26AIlIGT45U4abTobwWLn4kskk9fX15B2Pv+dKmLEyXJSgRLAJMNDVM6BFuDlRxDRNDh06hNYa5dyj4R+/QvkOhRLcm4b7uVm4O03DzbcQPw/AwYMHERFujkwhIbvsmrNwmXXQpY1IhFN3Cmx+IsLOnTu5dOkSAwMDhNJ/pWl6gELzIZxVLaB9wpnbREd+j3hTALS3t7Nlyxb8IOC3N8Yx7Tii1AL43LWkE152hL+8n+XF1jjHjh3jxIkTDAwMoJx71N56i9pHjNm4cSNHjx7FMAy6rg9zpRTCCpuL4HOVufReIIof3nZ4PJKj/ckYx48f5+LFi5w5c4ZcLrfQiOrq6OjoYPv27ZimSe/QBD+++RArnpid+wr4h9mMtGnx+vUcb+Yddrcm2Lt3L7t27WJ0dJSpqXLKGxoaaGpqwjRN/EDT3TfMj25MYcQSKMOsCl+RAIDAsvneHZcXht7nSFuMZ56oJ5VKkUql5vs4nk/f0AS/uz7Ku46JFV+9LBzALOUyICq37OHRDNGjTXp6s4TfHWFn3KQxUtY/UXD52wcurhXGjMSwVoVmq746XEQVvOkPMN3RO7gTI2+Hk2v3iWHGl6sJautwQ2He8Yrg6XItSQhVZxBSxmy1l5dcNbgO/Gxxcuzt3OD1eZc0Yy9+dW39jpdalj1Zzh0wS+7cagVmYRVQEUGQR0abuHz+7vgff3kLWNl58OP2f93+CdmgGE2+9bJzAAAAAElFTkSuQmCC"/>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<style>
:root{--clr1:#bfbfbf;--clr2:#434343;}
*,::after,::before{box-sizing:border-box}
sup{position:relative;bottom:30px}
sup{position:relative;bottom:10px;right:5px;}
.outerImageContainer{ margin: 0;}
.innerImageContainer{ width: 640px; height: 480px; position: relative; }
.coveredImage{ width: 640px; height: 480px; position: absolute; top: 0px; left: 0px;}
.coveringCanvas{ width: 640px; height: 480px; position: absolute; top: 0px; left: 0px;}
.resultwrapper, .button{grid-column-gap:10px;grid-row-gap:10px;}
.resultwrapper{display:grid;grid-template-columns:[left] 200px [leftend] auto [right];grid-template-rows:[top] auto [mid] auto [end];background:var(--clr1);width:640px;padding:10px;border-top:5px solid var(--clr2);}
.resultwrapper{display:grid;grid-template-columns:[left] 200px [leftend] auto [right];grid-template-rows:[top] 150px [mid] auto [end];background:var(--clr1);width:640px;padding:10px;border-top:5px solid var(--clr2);}
.resultwrapper a{text-decoration:none;color:var(--clr2)}
.button{display:grid;grid-template-columns:[lft] 120px [ctr] auto; background:rgba(0,0,0,0.3);padding:10px;font:bold 52px Sans-Serif;align-items:center}
.button:hover{text-decoration:underline;}
.button svg{height:120px;width:120px;grid-column-start:lft;grid-column-end:ctr;}
.button span{grid-column-start:ctr;}
.icon,.logo{fill:var(--clr2);height:50px}
.txt{position:relative;bottom:4px;font:bold 52px Sans-Serif;color:var(--clr2)}
.icon{fill:var(--clr2);height:50px}
.txt{position:relative;bottom:2px;right:4px;font:bold 27px Sans-Serif;color:var(--clr2)}
.resultwrapper>p{font:normal 12px Sans-Serif;color:var(--clr2)}
.logo{fill:var(--clr1);height:25px;}
#output{grid-column-start:left;grid-column-end:leftend;grid-row-start:top;grid-row-end:end;z-index:999;}
#outputsvg{grid-column-start:left;grid-column-end:leftend;grid-row-start:top;grid-row-end:end;fill:var(--clr2);width:200px;height:300px}
#info{grid-column-start:leftend;grid-column-end:right;grid-row-start:top;grid-row-end:mid;}
#download{height:140px;align-self:end;grid-column-start:leftend;grid-column-end:right;grid-row-start:mid;grid-row-end:end;}
#filesize{font-weight:bold}
#logo{position:absolute;top:-3px;left:15px;}
#logo *{color:var(--clr1);}
#log{overflow-x:auto;overflow:auto;padding:3px;border:1px solid var(--clr2);margin:0;grid-column-start:leftend;grid-column-end:right;grid-row-start:top;grid-row-end:mid;justify-self:stretch;}

</style>
</head>
Expand All @@ -46,20 +54,21 @@
<div id="div_inner" class="innerImageContainer">
<!--<canvas id="panel" class="cropimage coveringCanvas" style="z-index:999;" width="640" height="480" cropwidth="200" cropheight="300"></canvas>-->
<canvas id="panel" class="coveringCanvas" style="z-index: 999;" width="640px" height="480px" ></canvas>
<video id="video" onplaying="startDrawing()" onsuspend="stopDrawing()" class="coveredImage" autoplay></video>
<video id="video" autoplay></video>
</div>
<p id="logo">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 15">
<path d="M5.336 1.032C6.068.624 6.9.4 7.738.356c.44.02.885.07 1.3.248.818.307 1.495.933 1.918 1.692.47.776.676 1.678.775 2.57.217 2.955-.878 5.923-2.745 8.194-.734.734-1.64 1.357-2.677 1.548-.86.123-1.788-.06-2.48-.603-.428-.323-.6-.885-.565-1.404.38.536 1 .907 1.664.922.6.03 1.198-.246 1.602-.684.68-.733.747-1.97.1-2.75-.3-.338-.63-.642-1.025-.856-.382-.233-.84-.333-1.3-.395-.834-.053-1.698.098-2.432.508C1.17 9.75.648 10.468.485 11.27c-.167.623-.107 1.274-.04 1.906-.273-.723-.383-1.492-.442-2.26v-.56C.1 7.554 1.266 4.82 3.145 2.748 3.8 2.08 4.5 1.467 5.336 1.032zm9.716.52c.984.02 1.976-.005 2.935-.25l-2.174 7.562c.086-.06.168-.125.247-.194l2.653-2.4c.417-.346.847-.73 1.396-.84.25-.062.547-.047.744.14.455.404.4 1.202-.05 1.587-.24.222-.603.255-.908.172-.255-.063-.385-.317-.606-.437-.35-.012-.653.217-.917.423L16.73 8.723c-.013.073.06.135.085.202l1.663 2.983c.197.326.4.67.725.885.177.126.428.096.588-.044a2.4 2.4 0 0 0 .65-.936h.507c-.223.57-.48 1.14-.883 1.608-.278.345-.684.642-1.146.63-.392.015-.752-.206-1.008-.486-.415-.472-.7-1.037-1.008-1.58l-1.3-2.336-1.154 4.144c-.46-.002-.918 0-1.377-.001l2.705-9.662c.14-.528.342-1.054.332-1.608.007-.203-.126-.4-.33-.45-.278-.062-.566-.02-.85-.03l.13-.487zM27.1 5.4a3.66 3.66 0 0 0-.408.029 3.7 3.7 0 0 0-1.388.44c-.895.5-1.55 1.34-2.015 2.237a5.78 5.78 0 0 0-.555 3.453c.13.857.584 1.696 1.342 2.15.615.374 1.374.4 2.067.285.83-.125 1.586-.562 2.182-1.143.5-.53.93-1.15 1.213-1.83.387-.958.525-2.022.383-3.047-.1-.797-.496-1.576-1.143-2.07-.48-.362-1.082-.507-1.677-.502zm.063.477c.312-.013.626.06.86.276.355.328.458.83.512 1.3.076 1.075-.098 2.158-.437 3.178-.242.702-.53 1.4-.973 2-.34.473-.848.856-1.435.946-.387.056-.824-.018-1.107-.308-.37-.353-.445-.893-.5-1.377-.055-1.207.196-2.417.66-3.53.23-.57.503-1.132.9-1.614.3-.352.655-.666 1.102-.793a1.87 1.87 0 0 1 .417-.068zm6.46-4.322c.978.012 1.967.006 2.92-.25l-1.756 6.24c.5-.66 1.02-1.325 1.744-1.74.54-.32 1.193-.485 1.817-.363.445.085.858.375 1.05.792.156.325.17.697.13 1.05-.095.95-.5 1.826-.803 2.717l-.8 2.243c-.085.297-.206.613-.12.924.07.224.352.245.538.167a1.34 1.34 0 0 0 .495-.414c.272-.352.506-.74.617-1.175l.548-.001c-.166.743-.55 1.454-1.156 1.928-.445.354-1.068.48-1.6.3-.466-.16-.76-.646-.775-1.126-.033-.505.132-.993.276-1.47l.906-2.457c.3-.747.594-1.518.595-2.332a.49.49 0 0 0-.387-.49c-.55-.096-1.1.138-1.524.474-.6.474-1.04 1.12-1.402 1.786-.575.98-.927 2.066-1.225 3.156l-.654 2.275H31.65l1.944-6.97 1.028-3.737c.053-.26.175-.532.078-.798-.022-.14-.165-.2-.294-.223-.304-.047-.613-.015-.918-.023l.148-.485zM45.73 5.397l-.1.003c-.82.02-1.6.393-2.175.967-.663.664-1.13 1.503-1.458 2.377a6.32 6.32 0 0 0-.297 2.947c.12.76.43 1.54 1.06 2.02.516.385 1.214.4 1.816.25.844-.23 1.517-.864 1.995-1.575.03.465.1.96.42 1.327.295.336.795.413 1.207.278.388-.123.707-.4.953-.718.4-.493.667-1.083.845-1.7a16.79 16.79 0 0 0-.496.003c-.137.533-.423 1.015-.74 1.46-.174.198-.377.475-.677.426-.203-.05-.276-.284-.296-.468-.044-.54.048-1.08.195-1.598L49.62 5.67c-.468-.001-.935 0-1.403-.001l-.503 1.745c-.008-.548-.24-1.085-.634-1.465-.348-.364-.852-.552-1.35-.55zm.15.677c.292-.01.588.063.8.262.356.32.47.816.525 1.273.132 1.5-.27 2.986-.962 4.297-.316.577-.75 1.155-1.397 1.374-.394.132-.872.148-1.232-.084-.42-.265-.516-.8-.557-1.257-.04-.85.083-1.705.294-2.527.243-.864.542-1.734 1.075-2.467.284-.4.68-.725 1.16-.834a1.69 1.69 0 0 1 .287-.036z" stroke-width=".006"/>
</svg>
<span class="txt">mera</span><sup>&nbsp;v2.1.0</sup>
</p>
</div>
<div class="resultwrapper">
<img id="output"/>
<svg id="outputsvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.917 79.375">
<path d="M.53.522v13.244h2.65V3.174h10.593V.522H.53zm38.62 0v2.65h10.593v10.593h2.652V.522H39.15zM.53 65.608v13.244h13.244V76.2H3.18V65.608H.53zm49.212 0V76.2H39.15v2.65h13.244V65.608h-2.652zM17.344 24.63h2.54l4.1 8.443-.182.197v-8.64h1.986v11.012h-2.554l-4.085-8.314.182-.197v8.5h-1.986zm14.68 11.135q-1.198 0-2.115-.5-.9-.508-1.4-1.425-.5-.925-.5-2.137V28.58q0-1.213.5-2.13.5-.925 1.4-1.425.917-.508 2.115-.508 1.198 0 2.107.508.917.5 1.417 1.425.5.917.5 2.13v3.123q0 1.213-.5 2.137-.5.917-1.417 1.425-.9.5-2.107.5zm0-2.077q.56 0 .985-.235.424-.243.652-.682.235-.44.235-1.016v-3.23q0-.576-.235-1.016-.227-.44-.652-.674-.424-.243-.985-.243-.56 0-.985.243-.424.235-.66.674-.227.44-.227 1.016v3.23q0 .576.227 1.016.235.44.66.682.424.235.985.235zm-25.106 21.1H4.765v-11.02h2.152zm9.208-11.02h2.736v11.02h-1.887V46.22l.076.485-2.107 6.844H13.1l-2.107-6.693.076-.637v8.557H9.192v-11.02h2.736l2.1 7.428zm8.314-.01h1.32l4.214 11.02h-2.236L25.1 47.252l-2.638 7.526h-2.236zm-2.2 7.253h5.798v2H22.25zm16.738-2.395v2.152q0 1.228-.5 2.168-.493.932-1.402 1.448-.9.508-2.107.508-1.205 0-2.13-.477-.917-.485-1.425-1.364-.5-.88-.5-2.04v-3.25q0-1.228.493-2.16.5-.932 1.4-1.44.9-.515 2.107-.515.985 0 1.82.4.834.402 1.387 1.144.56.743.758 1.72h-2.243q-.114-.35-.38-.6-.258-.258-.614-.387-.35-.136-.728-.136-.553 0-.978.242-.417.243-.652.7-.227.447-.227 1.03v3.25q0 .515.235.9.235.394.667.606.432.212 1 .212.56 0 .978-.227.424-.235.652-.675.227-.44.227-1.038v-.182H35.15v-2zm2.198-4.858h2.077v11.02h-2.077zm.75 9.02h6.632v2h-6.632zm0-4.472h5.798v2h-5.798zm0-4.547h6.632v2h-6.632z"/>
</svg>
<p>
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 15">
<path d="M5.336 1.032C6.068.624 6.9.4 7.738.356c.44.02.885.07 1.3.248.818.307 1.495.933 1.918 1.692.47.776.676 1.678.775 2.57.217 2.955-.878 5.923-2.745 8.194-.734.734-1.64 1.357-2.677 1.548-.86.123-1.788-.06-2.48-.603-.428-.323-.6-.885-.565-1.404.38.536 1 .907 1.664.922.6.03 1.198-.246 1.602-.684.68-.733.747-1.97.1-2.75-.3-.338-.63-.642-1.025-.856-.382-.233-.84-.333-1.3-.395-.834-.053-1.698.098-2.432.508C1.17 9.75.648 10.468.485 11.27c-.167.623-.107 1.274-.04 1.906-.273-.723-.383-1.492-.442-2.26v-.56C.1 7.554 1.266 4.82 3.145 2.748 3.8 2.08 4.5 1.467 5.336 1.032zm9.716.52c.984.02 1.976-.005 2.935-.25l-2.174 7.562c.086-.06.168-.125.247-.194l2.653-2.4c.417-.346.847-.73 1.396-.84.25-.062.547-.047.744.14.455.404.4 1.202-.05 1.587-.24.222-.603.255-.908.172-.255-.063-.385-.317-.606-.437-.35-.012-.653.217-.917.423L16.73 8.723c-.013.073.06.135.085.202l1.663 2.983c.197.326.4.67.725.885.177.126.428.096.588-.044a2.4 2.4 0 0 0 .65-.936h.507c-.223.57-.48 1.14-.883 1.608-.278.345-.684.642-1.146.63-.392.015-.752-.206-1.008-.486-.415-.472-.7-1.037-1.008-1.58l-1.3-2.336-1.154 4.144c-.46-.002-.918 0-1.377-.001l2.705-9.662c.14-.528.342-1.054.332-1.608.007-.203-.126-.4-.33-.45-.278-.062-.566-.02-.85-.03l.13-.487zM27.1 5.4a3.66 3.66 0 0 0-.408.029 3.7 3.7 0 0 0-1.388.44c-.895.5-1.55 1.34-2.015 2.237a5.78 5.78 0 0 0-.555 3.453c.13.857.584 1.696 1.342 2.15.615.374 1.374.4 2.067.285.83-.125 1.586-.562 2.182-1.143.5-.53.93-1.15 1.213-1.83.387-.958.525-2.022.383-3.047-.1-.797-.496-1.576-1.143-2.07-.48-.362-1.082-.507-1.677-.502zm.063.477c.312-.013.626.06.86.276.355.328.458.83.512 1.3.076 1.075-.098 2.158-.437 3.178-.242.702-.53 1.4-.973 2-.34.473-.848.856-1.435.946-.387.056-.824-.018-1.107-.308-.37-.353-.445-.893-.5-1.377-.055-1.207.196-2.417.66-3.53.23-.57.503-1.132.9-1.614.3-.352.655-.666 1.102-.793a1.87 1.87 0 0 1 .417-.068zm6.46-4.322c.978.012 1.967.006 2.92-.25l-1.756 6.24c.5-.66 1.02-1.325 1.744-1.74.54-.32 1.193-.485 1.817-.363.445.085.858.375 1.05.792.156.325.17.697.13 1.05-.095.95-.5 1.826-.803 2.717l-.8 2.243c-.085.297-.206.613-.12.924.07.224.352.245.538.167a1.34 1.34 0 0 0 .495-.414c.272-.352.506-.74.617-1.175l.548-.001c-.166.743-.55 1.454-1.156 1.928-.445.354-1.068.48-1.6.3-.466-.16-.76-.646-.775-1.126-.033-.505.132-.993.276-1.47l.906-2.457c.3-.747.594-1.518.595-2.332a.49.49 0 0 0-.387-.49c-.55-.096-1.1.138-1.524.474-.6.474-1.04 1.12-1.402 1.786-.575.98-.927 2.066-1.225 3.156l-.654 2.275H31.65l1.944-6.97 1.028-3.737c.053-.26.175-.532.078-.798-.022-.14-.165-.2-.294-.223-.304-.047-.613-.015-.918-.023l.148-.485zM45.73 5.397l-.1.003c-.82.02-1.6.393-2.175.967-.663.664-1.13 1.503-1.458 2.377a6.32 6.32 0 0 0-.297 2.947c.12.76.43 1.54 1.06 2.02.516.385 1.214.4 1.816.25.844-.23 1.517-.864 1.995-1.575.03.465.1.96.42 1.327.295.336.795.413 1.207.278.388-.123.707-.4.953-.718.4-.493.667-1.083.845-1.7a16.79 16.79 0 0 0-.496.003c-.137.533-.423 1.015-.74 1.46-.174.198-.377.475-.677.426-.203-.05-.276-.284-.296-.468-.044-.54.048-1.08.195-1.598L49.62 5.67c-.468-.001-.935 0-1.403-.001l-.503 1.745c-.008-.548-.24-1.085-.634-1.465-.348-.364-.852-.552-1.35-.55zm.15.677c.292-.01.588.063.8.262.356.32.47.816.525 1.273.132 1.5-.27 2.986-.962 4.297-.316.577-.75 1.155-1.397 1.374-.394.132-.872.148-1.232-.084-.42-.265-.516-.8-.557-1.257-.04-.85.083-1.705.294-2.527.243-.864.542-1.734 1.075-2.467.284-.4.68-.725 1.16-.834a1.69 1.69 0 0 1 .287-.036z" stroke-width=".006"/>
</svg>
<span class="txt">mera</span><sup>&nbsp;v2.0.2</sup>
</p>
<pre id="log"></pre>
<a href="#" class="button" id="download" download>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z" />
Expand All @@ -68,6 +77,21 @@
</a>
</div>
<script>
//Output console log to HTML - Thanks to - https://stackoverflow.com/questions/20256760/javascript-console-log-to-html
(function () {
var old = console.log;
var logger = document.getElementById('log');
console.log = function () {
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />';
} else {
logger.innerHTML += arguments[i] + '<br />';
}
}
}
})();
//Start of video output
var canvas = document.getElementById('panel');
var context = canvas.getContext("2d");
var video = document.getElementById('video');
Expand Down Expand Up @@ -107,19 +131,47 @@
update();
// Trigger photo take
function getResult() {
console.time('render')
var temp_context, temp_canvas;
temp_canvas = document.createElement('canvas');
temp_context = temp_canvas.getContext('2d');
temp_canvas.width = selectionX;
temp_canvas.height = selectionY;
temp_context.drawImage(video, mouseX, mouseY, selectionX, selectionY, 0, 0, selectionX, selectionY);
var vData = temp_canvas.toDataURL('image/jpeg', 0.5);
var q = 1.00
var vData = temp_canvas.toDataURL('image/jpeg', q);
output.setAttribute('src', vData);
download.setAttribute('href', vData); //sets link to download button
download.setAttribute('download','capture.jpg')
//$('#output').attr('src', vData); requires jQuery
//Determine filesize of output - cannot exceed 520Kb according to KOHA, but seems to have issues at ~100Kb. The largest possible size of a 200x300 jpeg image is 240Kb
var sizeInBytes = Math.round((vData.length - 'data:image/jpeg;base64,'.length)*3/4);
var sizeInKb = Math.round((sizeInBytes/1024));
//checks file size, reports it, then starts a while loop to incrementally decrease quality until target filesize is hit.
while (sizeInKb > 100){ //Adjusted to 100Kb as images that large seem to have issues
console.log('File Size ' + sizeInKb + 'Kb -- Too Large! Decreasing quality');
var vData = temp_canvas.toDataURL('image/jpeg', q);
download.setAttribute('href', vData); //sets link to download button
var sizeInBytes = Math.round((vData.length - 'data:image/jpeg;base64,'.length)*3/4);
var sizeInKb = Math.round((sizeInBytes/1024));
q = q-0.01;
}
var qround = Math.ceil(q * 100);
console.log('File Size ' + sizeInKb + 'Kb at ' + qround + '% quality');
console.timeEnd('render')
}
//Announce image requirements
window.addEventListener("DOMContentLoaded", function() {
console.log('File Size should not exceed 100Kb')
}, false);
// Create an observer and pass it a callback.
var observer = new MutationObserver(scrollToBottom);
// Tell it to look for new children that will change the height.
var config = {childList: true};
observer.observe(log, config);
function scrollToBottom() {
log.scrollTop = log.scrollHeight;
}

//get fine position of mouse
function getPosition(el) {
var xPosition = 0;
Expand All @@ -135,6 +187,7 @@
y: yPosition
};
}

</script>
</body>
</html>

0 comments on commit e2a956d

Please sign in to comment.