topical media & game development

talk show tell print

mobile-query-three-vendor-threex-docs-THREEx.screenshot.htm / htm



  <!DOCTYPE html>  <html> <head>   <title>THREEx.screenshot.js</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>            <div id="jump_to">         Jump To &hellip;         <div id="jump_wrapper">           <div id="jump_page">                                           <a class="source" href="THREEx.CelShader.html">                 THREEx.CelShader.js               </a>                                           <a class="source" href="THREEx.DeviceOrientationState.html">                 THREEx.DeviceOrientationState.js               </a>                                           <a class="source" href="THREEx.FullScreen.html">                 THREEx.FullScreen.js               </a>                                           <a class="source" href="THREEx.GeometryUtils.html">                 THREEx.GeometryUtils.js               </a>                                           <a class="source" href="THREEx.GeometryWobble.html">                 THREEx.GeometryWobble.js               </a>                                           <a class="source" href="THREEx.KeyboardState.html">                 THREEx.KeyboardState.js               </a>                                           <a class="source" href="THREEx.LogoTurtle.html">                 THREEx.LogoTurtle.js               </a>                                           <a class="source" href="THREEx.PlasmaShader.html">                 THREEx.PlasmaShader.js               </a>                                           <a class="source" href="THREEx.SkyMap.html">                 THREEx.SkyMap.js               </a>                                           <a class="source" href="THREEx.WindowResize.html">                 THREEx.WindowResize.js               </a>                                           <a class="source" href="THREEx.glCapability.html">                 THREEx.glCapability.js               </a>                                           <a class="source" href="THREEx.requestAnimationFrame.html">                 THREEx.requestAnimationFrame.js               </a>                                           <a class="source" href="THREEx.screenshot.html">                 THREEx.screenshot.js               </a>                                           <a class="source" href="threex.embedded.html">                 threex.embedded.js               </a>                        </div>         </div>       </div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               THREEx.screenshot.js             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>                            </td>             <td class="code">               <div class="highlight"><pre><span class="cm">
@namespace

  </span>
  <span class="kd">var</span> <span class="nx">THREEx</span>        <span class="o">=</span> <span class="nx">THREEx</span>                 <span class="o">||</span> <span class="p">{};</span></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <p>TODO http://29a.ch/2011/9/11/uploading-from-html5-canvas-to-imgur-data-uri
  able to upload your screenshot without running servers</p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-3">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-3">&#182;</a>               </div>               <p>forced closure</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
  
          <span class="cm">
</span> <span class="cm"> * Take a screenshot of a renderer</span> <span class="cm"> * - require WebGLRenderer to have &quot;preserveDrawingBuffer: true&quot; to be set</span> <span class="cm"> * - TODO is it possible to check if this variable is set ? if so check it</span> <span class="cm"> * and make advice in the console.log</span> <span class="cm"> * - maybe with direct access to the gl context...</span> <span class="cm"> * </span> <span class="cm"> *
parameter: {Object} renderer to use <span class="cm"> *
parameter: {String} mimetype of the output image. default to "image/png" <span class="cm"> *
parameter: {String} dataUrl of the image <span class="cm">

  </span>
          <span class="kd">var</span> <span class="nx">toDataURL</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">renderer</span><span class="p">,</span> <span class="nx">mimetype</span><span class="p">)</span>
          <span class="p">{</span>
                  <span class="nx">mimetype</span>        <span class="o">=</span> <span class="nx">mimetype</span>        <span class="o">||</span> <span class="s2">&quot;image/png&quot;</span><span class="p">;</span>
                  <span class="kd">var</span> <span class="nx">dataUrl</span>        <span class="o">=</span> <span class="nx">renderer</span><span class="p">.</span><span class="nx">domElement</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="nx">mimetype</span><span class="p">);</span>
                  <span class="k">return</span> <span class="nx">dataUrl</span><span class="p">;</span>
          <span class="p">}</span>
  
          <span class="cm">
</span> <span class="cm"> * resize an image to another resolution while preserving aspect</span> <span class="cm"> *</span> <span class="cm"> *
parameter: {String} srcUrl the url of the image to resize <span class="cm"> *
parameter: {Number} dstWidth the destination width of the image <span class="cm"> *
parameter: {Number} dstHeight the destination height of the image <span class="cm"> *
parameter: {Number} callback the callback to notify once completed with callback(newImageUrl) <span class="cm">

  </span>
          <span class="kd">var</span> <span class="nx">_aspectResize</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">srcUrl</span><span class="p">,</span> <span class="nx">dstW</span><span class="p">,</span> <span class="nx">dstH</span><span class="p">,</span> <span class="nx">callback</span><span class="p">){</span></pre></div>             </td>           </tr>                               <tr id="section-4">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-4">&#182;</a>               </div>               <p>to compute the width/height while keeping aspect</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="kd">var</span> <span class="nx">cpuScaleAspect</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">maxW</span><span class="p">,</span> <span class="nx">maxH</span><span class="p">,</span> <span class="nx">curW</span><span class="p">,</span> <span class="nx">curH</span><span class="p">){</span>
                          <span class="kd">var</span> <span class="nx">ratio</span>        <span class="o">=</span> <span class="nx">curH</span> <span class="o">/</span> <span class="nx">curW</span><span class="p">;</span>
                          <span class="k">if</span><span class="p">(</span> <span class="nx">curW</span> <span class="o">&gt;=</span> <span class="nx">maxW</span> <span class="o">&amp;&amp;</span> <span class="nx">ratio</span> <span class="o">&lt;=</span> <span class="mi">1</span> <span class="p">){</span> 
                                  <span class="nx">curW</span>        <span class="o">=</span> <span class="nx">maxW</span><span class="p">;</span>
                                  <span class="nx">curH</span>        <span class="o">=</span> <span class="nx">maxW</span> <span class="o">*</span> <span class="nx">ratio</span><span class="p">;</span>
                          <span class="p">}</span><span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">curH</span> <span class="o">&gt;=</span> <span class="nx">maxH</span><span class="p">){</span>
                                  <span class="nx">curH</span>        <span class="o">=</span> <span class="nx">maxH</span><span class="p">;</span>
                                  <span class="nx">curW</span>        <span class="o">=</span> <span class="nx">maxH</span> <span class="o">/</span> <span class="nx">ratio</span><span class="p">;</span>
                          <span class="p">}</span>
                          <span class="k">return</span> <span class="p">{</span> <span class="nx">width</span><span class="o">:</span> <span class="nx">curW</span><span class="p">,</span> <span class="nx">height</span><span class="o">:</span> <span class="nx">curH</span> <span class="p">};</span>
                  <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-5">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-5">&#182;</a>               </div>               <p>callback once the image is loaded</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="kd">var</span> <span class="nx">onLoad</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span></pre></div>             </td>           </tr>                               <tr id="section-6">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-6">&#182;</a>               </div>               <p>init the canvas</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="kd">var</span> <span class="nx">canvas</span>        <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">);</span>
                          <span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span>        <span class="o">=</span> <span class="nx">dstW</span><span class="p">;</span>        <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span>        <span class="o">=</span> <span class="nx">dstH</span><span class="p">;</span>
                          <span class="kd">var</span> <span class="nx">ctx</span>                <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-7">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-7">&#182;</a>               </div>               <p>TODO is this needed</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span>        <span class="o">=</span> <span class="s2">&quot;black&quot;</span><span class="p">;</span>
                          <span class="nx">ctx</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-8">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-8">&#182;</a>               </div>               <p>scale the image while preserving the aspect</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="kd">var</span> <span class="nx">scaled</span>        <span class="o">=</span> <span class="nx">cpuScaleAspect</span><span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">,</span> <span class="nx">image</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">image</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-9">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-9">&#182;</a>               </div>               <p>actually draw the image on canvas</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="kd">var</span> <span class="nx">offsetX</span>        <span class="o">=</span> <span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span>  <span class="o">-</span> <span class="nx">scaled</span><span class="p">.</span><span class="nx">width</span> <span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="p">;</span>
                          <span class="kd">var</span> <span class="nx">offsetY</span>        <span class="o">=</span> <span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">-</span> <span class="nx">scaled</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="p">;</span>
                          <span class="nx">ctx</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">image</span><span class="p">,</span> <span class="nx">offsetX</span><span class="p">,</span> <span class="nx">offsetY</span><span class="p">,</span> <span class="nx">scaled</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">scaled</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-10">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-10">&#182;</a>               </div>               <p>dump the canvas to an URL        </p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="kd">var</span> <span class="nx">mimetype</span>        <span class="o">=</span> <span class="s2">&quot;image/png&quot;</span><span class="p">;</span>
                          <span class="kd">var</span> <span class="nx">newDataUrl</span>        <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="nx">mimetype</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-11">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-11">&#182;</a>               </div>               <p>notify the url to the caller</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="nx">callback</span> <span class="o">&amp;&amp;</span> <span class="nx">callback</span><span class="p">(</span><span class="nx">newDataUrl</span><span class="p">)</span>
                  <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-12">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-12">&#182;</a>               </div>               <p>Create new Image object</td>             <td class="code">               <div class="highlight"><pre>                <span class="kd">var</span> <span class="nx">image</span>         <span class="o">=</span> <span class="k">new</span> <span class="nx">Image</span><span class="p">();</span>
                  <span class="nx">image</span><span class="p">.</span><span class="nx">onload</span>        <span class="o">=</span> <span class="nx">onLoad</span><span class="p">;</span>
                  <span class="nx">image</span><span class="p">.</span><span class="nx">src</span>        <span class="o">=</span> <span class="nx">srcUrl</span><span class="p">;</span>
          <span class="p">}</span>
          </pre></div>             </td>           </tr>                               <tr id="section-13">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-13">&#182;</a>               </div>               <p>Super cooked function: THREEx.Screenshot.bindKey(renderer)
  and you are done to get screenshot on your demo</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="cm">
</span> <span class="cm"> * Bind a key to renderer screenshot</span> <span class="cm">

  </span>
          <span class="kd">var</span> <span class="nx">bindKey</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">renderer</span><span class="p">,</span> <span class="nx">opts</span><span class="p">){</span></pre></div>             </td>           </tr>                               <tr id="section-14">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-14">&#182;</a>               </div>               <p>handle parameters</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="nx">opts</span>                <span class="o">=</span> <span class="nx">opts</span>                <span class="o">||</span> <span class="p">{};</span></pre></div>             </td>           </tr>                               <tr id="section-15">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-15">&#182;</a>               </div>               <p>FIXME this modification of opts parameters is a bug. remove it</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="nx">opts</span><span class="p">.</span><span class="nx">charCode</span>        <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">charCode</span>        <span class="o">||</span> <span class="s1">&#39;p&#39;</span><span class="p">.</span><span class="nx">charCodeAt</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
                  <span class="nx">opts</span><span class="p">.</span><span class="nx">width</span>        <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">width</span>        <span class="o">||</span> <span class="mi">640</span><span class="p">;</span>
                  <span class="nx">opts</span><span class="p">.</span><span class="nx">height</span>        <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">height</span>        <span class="o">||</span> <span class="mi">480</span><span class="p">;</span>
                  <span class="nx">opts</span><span class="p">.</span><span class="nx">callback</span>        <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">callback</span>        <span class="o">||</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">){</span>
                          <span class="nb">window</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">url</span><span class="p">);</span>
                  <span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-16">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-16">&#182;</a>               </div>               <p>callback to handle keypress</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="kd">var</span> <span class="nx">onKeyPress</span>        <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span></pre></div>             </td>           </tr>                               <tr id="section-17">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-17">&#182;</a>               </div>               <p>return now if the KeyPress isnt for the proper charCode</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="k">if</span><span class="p">(</span> <span class="nx">event</span><span class="p">.</span><span class="nx">which</span> <span class="o">!==</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">charCode</span> <span class="p">)</span>        <span class="k">return</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-18">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-18">&#182;</a>               </div>               <p>get the renderer output</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="kd">var</span> <span class="nx">dataUrl</span>        <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="nx">renderer</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-19">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-19">&#182;</a>               </div>               <p>FIXME dont resize if not explicitly asked
  * resize == async so if callback is a window open, it triggers the pop blocker
  resize it and notify the callback</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="nx">_aspectResize</span><span class="p">(</span><span class="nx">dataUrl</span><span class="p">,</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">height</span><span class="p">,</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">callback</span><span class="p">);</span>
                  <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-20">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-20">&#182;</a>               </div>               <p>listen to keypress
  NOTE: for firefox it seems mandatory to listen to document directly</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;keypress&#39;</span><span class="p">,</span> <span class="nx">onKeyPress</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
  
                  <span class="k">return</span> <span class="p">{</span>
                          <span class="nx">unbind</span>        <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
                                  <span class="nb">document</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;keypress&#39;</span><span class="p">,</span> <span class="nx">onKeyPress</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
                          <span class="p">}</span>
                  <span class="p">};</span>
          <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-21">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-21">&#182;</a>               </div>               <p>export it    </p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="nx">THREEx</span><span class="p">.</span><span class="nx">Screenshot</span>        <span class="o">=</span> <span class="p">{</span>
                  <span class="nx">toDataURL</span>        <span class="o">:</span> <span class="nx">toDataURL</span><span class="p">,</span>
                  <span class="nx">bindKey</span>                <span class="o">:</span> <span class="nx">bindKey</span>
          <span class="p">};</span>
  <span class="p">})();</span>
  
  </pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html> 


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.