Crop image

[Ron]

This is an example of cropping an image, using some javascript.

 

The image is uploaded to the server, and then shown in the htmlframe

by the JS, and then the crop data is returned to the mainmodule, where

you can resample the image.

 

There is a need for better resampling routines, maybe somebody can

fix that - and if so please uploaded the new version.

 

Probably needs a little adjustment of the JS too re. moving the cropframe

if it's maxed out.

 

The JS is in the cropFrame.HTML, but for JS debugging it is usually

easier to edit when loaded from a file.

 

 

There should be another way to do this, where the image is never

initially uploaded to the server, but stays in the browser only and

is also resampled in the browser using JS, and then at last uploaded

to the server. Less data to transport, but a bit more work for the client.

 

 

unigui crop.zip

[valadi]

thanks

delphidude

[playsoft]

On 08/05/2016 at 10:35, Ron said:

Este é um exemplo de corte de uma imagem, usando algum javascript.

 

A imagem é carregada para o servidor e, em seguida, exibida no htmlframe

pelo JS e, em seguida, os dados da colheita são retornados ao módulo principal, onde

você pode reamostrar a imagem.

 

Há uma necessidade de melhores rotinas de reamostragem, talvez alguém possa

conserte isso - e se sim, faça o upload da nova versão.

 

Provavelmente precisa de um pequeno ajuste no JS também. movendo o quadro de corte

se estiver no máximo.

 

O JS está no cropFrame.HTML, mas para depuração JS geralmente é

mais fácil de editar quando carregado de um arquivo.

 

 

Deve haver outra maneira de fazer isso, onde a imagem nunca é

inicialmente carregado para o servidor, mas permanece apenas no navegador e

também é reamostrado no navegador usando JS e, por último, carregado

para o servidor. Menos dados para transportar, mas um pouco mais de trabalho para o cliente.

 

 

unigui crop.zip 155,16 kB · 173 downloads

Hello, did you improve the example? I'm using but the image quality obtained in the cut is very low. Any idea?

[Sherzod]

3 minutes ago, playsoft said:

Hello, did you improve the example? I'm using but the image quality obtained in the cut is very low. Any idea?

Hello,

Also may help you:

You can crop the image yourself on the server side knowing the coordinates.

[playsoft]

48 minutes ago, Sherzod said:

Olá,

Também pode ajudá-lo:

Você mesmo pode cortar a imagem no lado do servidor, sabendo as coordenadas.

I need to do this on mobile, but I couldn't adapt the model. can you help me with a small example? 🙂

[Sherzod]

20 hours ago, playsoft said:

I need to do this on mobile, but I couldn't adapt the model. can you help me with a small example? 🙂

Hello,

I don't even know. Need to analyze.

[playsoft]

Just now, Sherzod said:

Olá,

Eu nem sei. Precisa analisar.

I tried to adapt these for mobile but I couldn't ... when you have a little time and can be kind enough to analyze I would be very grateful ...🤗

[deljavan]

Dear Sherzod or other friends 
I tested "unigui crop.zip" sample in the below link and it working fine:

But I want to change ratio of crop from horizontal mode to vertical mode which it ratio ideal for personal photo crop.
Default crop box almost 125 pixel for width and 100 pixel for height which ideal crop most be 100 pixel for width and 125 pixel for height.
Unfortunately, I cannot change UniHTMLFarme (cropFrame) to other size for ideal crop.
In the attachment pictures you can find better my issue.
Do you have solution for me?

 

 

[Kenneth]

On 1/18/2021 at 8:30 PM, playsoft said:

Hello, did you improve the example? I'm using but the image quality obtained in the cut is very low. Any idea?

Please try this:

SetStretchBltMode(bmp2.Canvas.Handle,4); //<-------- use this 
bmp2.Canvas.CopyRect(destRect, bmp.canvas, srcRect);

 

[stf]

Thank you very much!

[SISBLU Software]

Hello. I modified it to 200x200, it was right.
But when I click to decrease at any point, it redoes and is no longer 200x200
What do I need to change?

in HTML:

 

  window.addEventListener('resize', resizeCropCanvas, false);
  function resizeCropCanvas() {
    cCanvas.width = window.innerWidth;
    cCanvas.height = window.innerHeight;
     drX = 50;
    drY = 65;
    drW = 200;
    drH = 200;    
    newDrX = drX;
    newDrY = drY;
    newDrW = drW;
    newDrH = drH;
    
    drawDashRect();
  }

 

A

[SISBLU Software]

any Solution?

[Sherzod]

14 minutes ago, SISBLU Software said:

any Solution?

Hello, 

Your case is not clear to me, sorry.

[SISBLU Software]

I modified it to crop 200x200

    drW = 200;
    drH = 200;    

  But when I go to SIZE , it returns to
  drW = 480;
   drH = 270;

 

unigui crop (2).zip

[Sherzod]

Hello @SISBLU Software

I will try to check. 

[Sherzod]

On 6/28/2023 at 12:15 AM, SISBLU Software said:

I modified it to crop 200x200

    drW = 200;
    drH = 200;    

  But when I go to SIZE , it returns to
  drW = 480;
   drH = 270;

[Sherzod]

Hello @SISBLU Software

Have you checked?

It would be nice to leave feedback.

[SISBLU Software]

ERROR in ACCEPT IMAGE

 

[Sherzod]

33 minutes ago, SISBLU Software said:

ERROR in ACCEPT IMAGE

Seems like another issue, doesn't it?

If so, don't confuse us with the original question that the post was created from.