我从openSeadragonSelection检索了一个rect:
观众:
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获得画布。
this.viewer.open(new OpenSeadragon.ImageTileSource(this.getTile(this.src)));
自实现的imageViewer返回选定区域的画布。这样我就可以得到这个blob并将它发布到服务器上:
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。还应考虑轮调。
@iangilman
谢谢你的建议。我又创作了一幅画布,然后把它放回观众中。我不确定您的库是否支持类似的内容:
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;
轮换还没有被考虑过。
发布于 2017-08-15 16:47:49
我想您需要将矩形转换为适当的坐标,然后创建第二个画布,并将适当的位从OSD画布复制到第二个画布中。
看起来可能选择矩形在图像坐标中?OSD画布将在网络坐标中,或者可能是HDPI显示器上的两倍。OSD具有许多转换功能,例如:
var viewportRect = viewer.viewport.imageToViewportRectangle(imageRect);
var webRect = viewer.viewport.viewportToViewerElementRectangle(viewportRect);
您可以通过OpenSeadragon.pixelDensityRatio
了解像素密度。
一旦有了合适的矩形,就很容易从一个画布复制到另一个画布中。我不知道您是如何合并旋转的,但是它可能就像在画布上下文中添加一个旋转调用一样简单。
对不起,这有点含糊不清,但我希望这会有所帮助!
https://stackoverflow.com/questions/45675644
复制相似问题