I am creating a website where one functionality is that users can select an area of an image from which to extract text from.
I have put my image in a scrollable div to save space.
<div id="image-container" style="width: 100%; height:75%; overflow:scroll; overflow-x:hidden;">
<img src="data:image/png;base64,{{ image }}" style="object-fit: cover; width: 100%; height: auto;" id="target" >
</div>
When I am selecting the area the program looks like this image. And when i try to scroll the crosshair moves but the selected area does not want to follow it image.
My Jcrop code:
var jcropApi
var scroll = 0
$(document).ready(function(){
$('#target').Jcrop({
onSelect: showCoords,
onChange: showCoords
})
})
function showCoords(c) {
$('#image-container').on('scroll', function(){
scroll = $('#image-container').scrollTop()
})
c.y2 += scroll
jcropApi = this
}
function getSelectedImageData() {
if (jcropApi) {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
// Get the selected coordinates
var selection = jcropApi.tellSelect()
// Set the canvas size to the selection size
canvas.width = selection.w
canvas.height = selection.h
// Draw the cropped region to the canvas
context.drawImage(jcropApi.ui.holder.find('img')[0], selection.x, selection.y, selection.w, selection.h, 0, 0, selection.w, selection.h)
// Get the data URL from the canvas
var dataUrl = canvas.toDataURL('image/png')
input = document.getElementById('image')
image = document.getElementById('target')
x1 = document.getElementById('x1')
y1 = document.getElementById('y1')
x2 = document.getElementById('x2')
y2 = document.getElementById('y2')
input.value = dataUrl
x1.value = selection.x
y1.value = selection.y
x2.value = (selection.w + selection.x)
y2.value = (selection.h + selection.y)
} else {
console.log('Jcrop instance not initialized.')
}
}
How can I make the selected area follow the cursor ?