Databases
StackOverflow2013
Postsdbo
POHow to resize an image like facebook cover
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to resize an image like facebook cover
    primarykey
    data
    text
    <p>What basically I am trying to do is to create a cover page for my personal website, just like facebook. Basically I am after the same layout of the cover as on facebook, so that user can get the same result while using the same cover on my site as well as on facebook.</p> <p>The part I am stucked at is the "Drag image to position cover" thing. The Facebook uses some algorithm to convert the cover image size to something different during dragging thing. For example, if the original image dimensions are 920x720, the dimensions of same image while it is on facebook setting-cover page(drag image to position cover thing), the dimensions of the image are 851x638. </p> <p>I just wanted to know what algorithm facebook uses to set the image dimensions(from 720 to 638)</p> <p><strong>NOTE: The cover has to be the pixel perfect</strong></p> <p>I know that the cover dimension of facebook is 851x315, so here is what I am doing:</p> <pre><code> //$x = X origin cordinate variable obtained by dragging image //$y = Y origin cordinate variable obtained by dragging image list($k, $l) = getimagesize($src); // $src == image source //$w = Needs to be calculated //$h = Needs to be calculated $img_r = imagecreatefromjpeg($src); $dst_r = ImageCreateTrueColor( 854,316 ); imagecopyresampled($dst_r,$img_r,0,0,$x,$y,$w,$h,$k,$l); imagejpeg($dst_r,$src,$jpeg_quality); $img_name = writeToImage($src, $des); //writeToImage() is just a demo function created by me to do some other things with them which do not affect this part of code echo $img_name; </code></pre> <p>I need to figure out how facebook calculates the new dimension of the image from previous one. Is it dependent of the actual(original) size of the image or is it dependent on some other factors?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USashutosh
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou wrote 851x638. Did you mean 815x638?
      singulars
      1. POHow to resize an image like facebook cover
      1. USHerbert
    2. CO@Herbert: No. I meant 851x638 only. I am quite sure about what I am writing about pixels in this situation. So there is no chance of errors in dimensions/pixels
      singulars
      1. POHow to resize an image like facebook cover
      1. USashutosh
    3. COjquery drag events may help you. I overcome this problem by messing aroung Jcrop events. [Jcrop Overview](http://deepliquid.com/content/Jcrop.html)
      singulars
      1. POHow to resize an image like facebook cover
      1. USJoem Maranan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload