Image field editing with canvas

[Karl_T]

My client has requested a custom image field, with a predefined width and height for the output image. The field works like this: after the image upload, or when re-editing the image, the uploaded image can be drag around, resize and rotate within the set canvas. The background color can be chosen, so the output image could have extra padding to make it look nicer. (I know this should be done using paint or photoshop, but my client thinks that this is cool and a must have function)

I wonder if Processwire can do the job, or a module with similar function had been developed before (googled with no luck). Although I think this could be done with a custom module using HTML5 canvas with a related javascript library (I have some experience) to replace the original cropper (override executeEdit in ProcessPageEditImageSelect.module), the image field looks complex to me to extend. Extra data has to be stored too, like canvas object data to retain the existing objects' position. Any thoughts are welcome. Thanks.

[Karl_T]

I did some trials and find that the original crop(cropper js) is able to do the job. Most codes sit inside a core module called ProcessPageEditImageSelect. Zoom can be enabled by setting zoomable to true in ProcessPageEditImageSelect.js, but it only allows zoom-in (scale >=1). For making some extra white space for the image, I need the zoom-out function. Then, I update cropper.js to the latest version(from v.0.7.8 to v4.0.0). It works after I fix some broken codes("done" method is not working).

Then I stuck when I try to crop images. If I zoom-out, I get error message like this: Missing or wrong param x=-84 for ImageSizer-cropExtra! Array ( [0] => -84 [1] => -58 [2] => 620 [3] => 380 ), while zoom-in works just fine.

I check the ImageSizer.php and ImageSizerEngine.php. I found that negative x value is throwing the exception. This explains why I cannot zoom-out.

https://fengyuanchen.github.io/cropper/
In case you are interested, this demo can demonstrate the negative X value when zoom-out(scroll down the mousewheel).

I think the negative value should be filled by white space by php. I have no idea how to implement this into ImageSizer.php and ImageSizerEngine.php yet. Welcome any ideas. Thanks!