Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h2>Resizing Images in JavaScript</h2>
<p>Image Credit: <a href="https://pixabay.com/photos/tulips-flowers-field-sky-6897351/">Pixabay</a></p>
<div><canvas id="canvas"></canvas></div>

<div><button class="download">Download Image</button></div>

<script>
  imagePath = 'data:image/jpeg;base64,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';
</script>
              
            
!

CSS

              
                * {
  padding: 0;
  margin: 0;
  boxz-sizing: border-box;
}

body {
  margin: 20px auto;
  font-family: 'Dosis';
  font-weight: 300;
  text-align: center;
  font-size: 1rem;
}

canvas {
  margin: 20px auto;
}

input {
  border: none;
  border-bottom: 1px  solid black;
  font-family: 'Dosis';
  margin: 1rem;
  text-align: center;
  outline: none;
  width: 200px;
}

button {
  background: yellowgreen;
  border: 2px solid black;
  color: black;
  border-radius: 5px;
  padding: 1rem 2rem;
  cursor: pointer;
  font-family: 'Dosis';
}

h2 {
  margin: 1rem 0;
}

div.wrapper {
  display: flex;
  flex-direction: column;
}

form {
  display: flex;
  justify-content: center;
}

label {
  margin: 0 1rem;
  color: gray;
}
              
            
!

JS

              
                //resize and draw the image on first load
resizeImage(imagePath, 360, 240);

//resize the image and draw it to the canvas
function resizeImage(imagePath, newWidth, newHeight) {
    //create an image object from the path
    const originalImage = new Image();
    originalImage.src = imagePath;
 
    //get a reference to the canvas
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
 
    //wait for the image to load
    originalImage.addEventListener('load', function() {
        
        //get the original image size and aspect ratio
        const originalWidth = originalImage.naturalWidth;
        const originalHeight = originalImage.naturalHeight;
        const aspectRatio = originalWidth/originalHeight;
 
        //if the new height wasn't specified, use the width and the original aspect ratio
        if (newHeight === undefined) {
            //calculate the new height
            newHeight = newWidth/aspectRatio;
            newHeight = Math.floor(newHeight);
            
            //update the input element with the new height
            hInput.placeholder = `Height (${newHeight})`;
            hInput.value = newHeight;
        }
      
        //set the canvas size
        canvas.width = newWidth;
        canvas.height = newHeight;
         
        //render the image
        ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);
    });
}

const downloadBtn = document.querySelector("button.download");
 
//a click event handler for the download button
//download the resized image to the client computer
downloadBtn.addEventListener('click', function() {
    //create a temporary link for the download item
    let tempLink = document.createElement('a');

    //generate a new filename
    let fileName = `image-resized.jpg`;
  
    //configure the link to download the resized image
    tempLink.download = fileName;
    tempLink.href = document.getElementById('canvas').toDataURL("image/jpeg", 0.9);
  
    //trigger a click on the link to start the download
    tempLink.click();
});


              
            
!
999px

Console