How can I crop part of an image on the OpenSeaDragon library?
<p>Thanks in advance for your help.
I'm using openseadragon library. The main idea is to select parts of a zoomable image and copy them on a already defined canvas. To make this possible I'm trying to use the function <em>canvas.getcontext('2d').DrawImage()</em> but for that I need to transform the viwer instance of openseadragon to an image, and is in that point where is failing.</p>

<p>This is the transformation: <code>imageObj.src = viewer.canvas.toDataURL();</code></p>

<p>This is the full code:</p>

<pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;div id="formulario" style="formulario"&gt;
        &lt;form name="form" method="post" action=""&gt;
          &lt;div&gt;  
            &lt;canvas id="imagen" style="imagenCont"&gt;
            &lt;/canvas&gt;
          &lt;/div&gt; 
        &lt;/form&gt;
      &lt;p id="pruebax"&gt;(0,0)&lt;/p&gt;
      &lt;p id="pruebay"&gt;(1,0)&lt;/p&gt;
      &lt;p id="pruebaw"&gt;(1,1)&lt;/p&gt;
      &lt;p id="pruebah"&gt;(0,1)&lt;/p&gt;
      &lt;p id="centro"&gt;c&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="map" class="openseadragon"&gt;
        &lt;script type="text/javascript"&gt;
          var viewer = OpenSeadragon({
            id:            'map',
            prefixUrl:     'openseadragon/images/',
            tileSources:   'borde_de_salida_full.dzi',
            showNavigator: true,
          });
          var selection = viewer.selection({
            onSelection: function(rect){
              document.getElementById("pruebax").textContent='('+rect.x+','+rect.y+')';
              document.getElementById("pruebay").textContent='('+(rect.x+rect.width)+','+rect.y+')';
              document.getElementById("pruebaw").textContent='('+(rect.x+rect.width)+','+(rect.y+rect.height)+')';
              document.getElementById("pruebah").textContent='('+rect.x+','+(rect.y+rect.height)+')';
              document.getElementById("centro").textContent='('+((rect.x+rect.width)/2)+','+((rect.y+rect.height)/2)+')';
              var canvas = document.getElementById('imagen');
              var context = canvas.getContext('2d');
              var imageObj = new Image();
              imageObj.src = viewer.canvas.toDataURL();
              var overlay = viewer.canvasOverlay({
                clearBeforeRedraw:true,
                onRedraw:function(){
                  overlay.context2d().strokeStyle = "red";
                  overlay.context2d().lineWidth = 35;
                  overlay.context2d().strokeRect(rect.x, rect.y, rect.width , rect.height);
                  context.drawImage(imageObj, rect.x, rect.y, rect.width, rect.height, rect.x, rect.y, rect.width, rect.height); //cambiar tamaño del destino a posteriori.
                }
              });
              selection.toggleState()=false;
            }
          });
        &lt;/script&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
</code></pre>

<p>Thanks</p>