Jump to content

Crop image


Ron

Recommended Posts

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.

 

 

post-980-0-34264800-1462717751_thumb.png

unigui crop.zip

  • Like 3
  • Upvote 2
Link to comment
Share on other sites

  • 4 years later...
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.

 

 

post-980-0-34264800-1462717751_thumb.png

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 🙂

Link to comment
Share on other sites

  • 1 month later...

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?

image.png.1565b0e4d12ef1fd60f3ee65e43f86d4.pngimage.png.ad47f2e977e0742a49e14f9a17d25c13.png

 

 

Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

  • 6 months later...
  • 1 year later...

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();
  }

 

Aimage.thumb.png.d6df36e9773f1367737e43c6e48f73ec.png

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...