Jump to content

Recommended Posts

Posted

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

Posted
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.

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

Posted
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.

Posted
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 ...🤗

  • 1 month later...
Posted

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

 

 

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

 

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

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

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

image.png.b6338248b4816c51f375d1ca9f6bdada.png

Posted
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.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...