Solution to match my need in a project. A work in (slow) progress. This is an example of the usage.

The need is to show just a selected part of a larger image. In the project, the coordinates of the displayed area are stored in the database. Will probably have to make some changes since I'm manually entering them here. But I more or less have the format (confusing since both Rails and JavaScript show different formatting for arrays depending on how you display them.)

Based on Static Image OpenLayers Example and ol-ext: Crop filter Example, and Crop Filter Document. Only using cropping. Masking covers with colors.

Crop layer is meant to be another layer on top of a base layer and I just want the crop. Is this a hack, that is too complicated? It should work as can be demonstrated by removed the "baselayer" from the ol_ext_crop example

Baselayer, ie, the tinted layer can be removed. But gives context on how it's working.

Challenge was getting coords for cropping in the right format.

Starting with a clean controller using crop_controller as the guide

Advanced View Positioning might be another way to do this. But this way works and is less code and probbly simpler.

Note format and sign. y is positive, but I'm not sure that's how I have them in the crores database

snippetCenter in overall image: [[508, 560]]

Should show Dol (at a slight angle as the page isn't straight. And should appear above the hr)
 

snippetCoords (class): [[135, 532], [882, 532], [882, 588], [135, 588]] (Array)