Question

提前感谢您的帮助。我正在使用openseadragon库。主要思想是选择可缩放图像的一部分并将其复制到已定义的画布上。为了实现这一点，我正在尝试使用函数 canvas.getcontext（'2d'）。DrawImage（）但为此我需要将openseadragon的viwer实例转换为图像，并且那一点失败了。

这是转型：imageObj.src = viewer.canvas.toDataURL();

这是完整的代码：

<body>
    <div>
      <div id="formulario" style="formulario">
        <form name="form" method="post" action="">
          <div>  
            <canvas id="imagen" style="imagenCont">
            </canvas>
          </div> 
        </form>
      <p id="pruebax">(0,0)</p>
      <p id="pruebay">(1,0)</p>
      <p id="pruebaw">(1,1)</p>
      <p id="pruebah">(0,1)</p>
      <p id="centro">c</p>
      </div>
      <div id="map" class="openseadragon">
        <script type="text/javascript">
          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;
            }
          });
        </script>
      </div>
    </div>
  </body>

由于

Answer 1

从openseadragon-selection获取所选图像

var selection = viewer.selection({
   onSelection: function(rect){
      var viewportRect = viewer.viewport.imageToViewportRectangle(rect);
      var webRect = viewer.viewport.viewportToViewerElementRectangle(viewportRect);
      const { x, y, width, height } = webRect || {};
      const { canvas } = viewer.drawer;
      let source = canvas.toDataURL();

      const img = new Image();
      img.onload = () => {
        let croppedCanvas = document.createElement('canvas');
        let ctx = croppedCanvas.getContext('2d');
        croppedCanvas.width = width;
        croppedCanvas.height = height;

        const pixelDens = OpenSeadragon.pixelDensityRatio;
        ctx.drawImage(img, x*pixelDens, y*pixelDens, width*pixelDens, height*pixelDens, 0, 0, width, height);
        let croppedSrc = croppedCanvas.toDataURL();

        fetch(croppedSrc)
          .then(res => res.blob())
          .then(blob => {
            const file = new File([blob], "File name", { type: "image/png" })
            // you can get selected cropped image file here
        })
      }
      img.src = source;
   }
})

如何在OpenSeaDragon库上裁剪部分图像？

1 个答案: