openseadragon 获得选择 dataurl/blob

Question

我从 openSeadragonSelection 中检索了一个矩形：

观看者：

this.viewer = OpenSeadragon(this.config);
this.selection = this.viewer.selection({
    showConfirmDenyButtons:  true,
    styleConfirmDenyButtons: true,
    returnPixelCoordinates:  true,
    onSelection:  rect => console.log(rect)
});
this.selection.enable();

通过 onSelection 调整：

t.SelectionRect {x: 3502, y: 2265, width: 1122, height: 887, rotation:0, degrees: 0, …}

我不知道如何从我的查看器实例中通过 rect 获取 canvas。

this.viewer.open(new OpenSeadragon.ImageTileSource(this.getTile(this.src)));

自行实现的 imageViewer 返回了所选区域的 canvas。所以我可以获取 blob 并将其 post 发送到服务器：

    onSave(canvas){
        let source = canvas.toDataURL();
        this.setState({source:source, crop: false, angle: 0});
        save(this.dataURItoBlob(source), source.match(new RegExp("\/(.*);"))1]);
    }

    dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = unescape(dataURI.split(',')[1]);
        // separate out the mime component
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        // write the bytes of the string to a typed array
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {type:mimeString});
    }

我怎样才能通过rect.getViewer的图像呢？旋转也应考虑。

@iangilman:

非常感谢您的建议。我创建了另一个 canvas 并对其进行裁剪，然后将其放回查看器中。我不确定你的图书馆是否支持类似的东西：

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

const img = new Image();
img.onload = function () {
  let croppedCanvas = document.createElement('canvas');
  let ctx = croppedCanvas.getContext('2d');
  croppedCanvas.width = width;
  croppedCanvas.height = height;
  ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
  let croppedSrc = croppedCanvas.toDataURL();
  //update viewer with cropped image
  self.tile = self.getTile(croppedSrc);
  self.ImageTileSource = new OpenSeadragon.ImageTileSource(self.tile);
  self.viewer.open(self.ImageTileSource);
}
img.src = source;

尚未考虑旋转。

Answer 1

我想您需要将矩形转换为正确的坐标，然后创建第二个 canvas 并将适当的位从 OSD canvas 复制到第二个。

看起来选择矩形可能在图像坐标中？ OSD canvas 将在网络坐标中，或者可能是 HDPI 显示器上的两倍。 OSD有很多转换函数，例如：

var viewportRect = viewer.viewport.imageToViewportRectangle(imageRect);
var webRect = viewer.viewport.viewportToViewerElementRectangle(viewportRect);

您可以通过OpenSeadragon.pixelDensityRatio找到像素密度。

一旦你有了合适的矩形，应该很容易从一个 canvas 复制到另一个。我不确定您是如何合并轮换的，但这可能就像向 canvas 上下文之一添加轮换调用一样简单。

抱歉，这有点含糊，但希望对您有所帮助！

openseadragon 获得选择 dataurl/blob

openseadragon get selection dataurl/blob

canvas

image

image-processing

openseadragon