Member Avatar for ckjaseem

Hi all ,
I have googled for an answer for this question but most of them are so complicated. Can anyone suggest a simple article on this topic or show me step by step how to solve this.

I want to upload an image to a folder and show this image as a background for a <div>. I have managed to preview the image without uploading it to the folder (But it wont crop or re-size)
what I have done so far : -

"index.php"

<form id="imageform" enctype="multipart/form-data" method="post" action="upload.php"> 
    <input id="fileToUpload" type="file" name="fileToUpload"/> 
    <input type="submit" value="Upload Image" /> 
</form>

// preview the image here (width:620px,height:516px)
<div id="image_preview"></div>

"index.js"

$("input[name='fileToUpload']").on("change", function(){
    var files = !!this.files ? this.files : [];
    if ( !files.length || !window.FileReader ) return;
    if ( /^image/.test( files[0].type ) ) {
    var reader = new FileReader();
    reader.readAsDataURL( files[0] );
    reader.onloadend = function(){
        $("#image_preview").css("background-image", "url(" + this.result + ")"); }
    }
});

"upload.php"
.......

  • 2 Contributors
  • 1 Reply
  • 691 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Two simple, practical options depending on whether you want the browser to do the work (faster for users and saves bandwidth) or the server to do it (safer, works for older browsers). already has a working preview; is right that PHP is a solid option. Below are compact, actionable patterns you can drop into your flow: client-side crop/resize to a 620×516 preview and upload the result, or upload then resize/crop with PHP (GD). Always validate files server-side.

Client-side (canvas → blob → upload). Read the File, draw the selected crop onto a canvas sized to your target, then send the blob with FormData. Replace sx,sy,sW,sH with the selection coordinates from your UI (or use a library like Cropper.js to get them).

// file = input.files[0]
const reader = new FileReader();
reader.onload = e => {
  const img = new Image();
  img.onload = () => {
    const canvas = document.createElement('canvas');
    const destW = 620, destH = 516;
    canvas.width = destW; canvas.height = destH;
    const ctx = canvas.getContext('2d');
    // drawImage(img, sx, sy, sW, sH, 0,0, destW, destH)
    ctx.drawImage(img, sx, sy, sW, sH, 0, 0, destW, destH);
    canvas.toBlob(blob => {
      const fd = new FormData();
      fd.append('fileToUpload', blob, 'cropped.jpg');
      fetch('upload.php', { method: 'POST', body: fd });
      // preview: document.getElementById('image_preview').style.backgroundImage = `url(${canvas.toDataURL()})`
    }, 'image/jpeg', 0.9);
  };
  img.src = e.target.result;
};
reader.readAsDataURL(file);

Server-side (PHP, GD): validate mime and size, move the upload, then resize/crop server-side. Minimal resize routine:

function resize_and_save($src,$dst,$dw,$dh){
  list($w,$h,$type)=getimagesize($src);
  $srcImg = ($type==IMAGETYPE_PNG)? imagecreatefrompng($src) :
            (($type==IMAGETYPE_GIF)? imagecreatefromgif($src) :
            imagecreatefromjpeg($src));
  $dstImg = imagecreatetruecolor($dw,$dh);
  // preserve PNG/GIF transparency if needed
  imagecopyresampled($dstImg,$srcImg,0,0,0,0,$dw,$dh,$w,$h);
  imagejpeg($dstImg,$dst,90);
  imagedestroy($srcImg); imagedestroy($dstImg);
}

Quick troubleshooting: handle JPEG EXIF orientation (smartphones), enable imagealphablending/imagesavealpha for PNG transparency, check upload_max_filesize/post_max_size, ensure upload folder permissions, and always re-check MIME/type on the server. If you want a ready UI for selecting crop regions, use a maintained library (e.g., Cropper.js) to get selection coords and feed them into the canvas flow above.

Member Avatar for Member #949455

I have googled for an answer for this question but most of them are so complicated. Can anyone suggest a simple article on this topic or show me step by step how to solve this.

The code you provide is 1/4 of a code. You need more than that.

Read and try this:

http://www.codeforest.net/how-to-crop-an-image-using-jquery-and-php

or you can just used PHP instead:

http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/

http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html

Edited by Member #949455 because: grammer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.