个人中心
gpt4 book ai didi

javascript - 如何裁剪 OpenSeaDragon 库中的部分图像？

转载 作者：行者123 更新时间：2023-12-03 07:14:10 26 4
gpt4 key购买 nike

在此先感谢您的帮助。我正在使用 openseadragon 库。主要思想是选择可缩放图像的部分并将它们复制到已定义的 Canvas 上。为了使这成为可能，我正在尝试使用函数 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>

谢谢

最佳答案

从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;
   }
})

关于javascript - 如何裁剪 OpenSeaDragon 库中的部分图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39831363/

26 4 0
文章推荐： amazon-web-services - aws cloudformation 用户数据 : how to use local variable in script
文章推荐： entity-framework - 没有 DbSet 的 Entity Framework 核心存储过程
文章推荐： amazon-web-services - 通过 CloudFormation 将多个存储桶附加到 CloudFront
文章推荐： design-patterns - 我应该使用什么模式将报告处理到基础设施中以允许各种表示？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com