Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) {
    var canvas = document.createElement("canvas");
    if (img.width * img.height < 921600) { // Less than 480p
        canvas.width = 1920;
        canvas.height = 1080;
    } else if (img.width * img.height > 2073600) { // Greater than 1080p
        canvas.width = img.width;
        canvas.height = img.height;
    }
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL("image/jpg");
    return dataURL.replace(/^data:image\/(jpg);base64,/, "");
}

I need to adjust the resolution of an image before uploading it. If the image is less than 480p, I want to increase its size to 480p on canvas. If the image is greater than 1080p, I want to reduce it to 1080p on canvas.

Is there a way to set minimum and maximum width and height for the canvas, or any alternative method to modify the image's resolution before uploading?

Answer №1

Below is a quick solution, but keep in mind that there may be room for code improvement:

 function encodeImageToBase64(img) {
    var canvas = document.createElement("canvas");
    let image = document.createElement("img");
    image.setAttribute("src", img);

    setTimeout(function(){
        if(image.height == 1080){
            canvas.width = 1920;
            canvas.height = 1080;
        }
        if(image.height == 480){
            canvas.width = 640;
            canvas.height = 480;
        }
    },0)

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL("image/jpg");
    return dataURL.replace(/^data:image\/(jpg);base64,/, "");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize AngularJS's nested ng-repeat to showcase information from two distinct JSON strings simultaneously

I am dealing with two different JSON strings from databases. [{ sport: football, sportid: 1 },{ sport: tennis, sportid: 2 },{ sport: golf, sportid: 3 },{ sport: swimming, sportid: 4 }] and [{ personid: 1, name: ...

Easily accessible jQuery tabs with the option to directly link to a specific tab

I currently have tabs set up on my webpage. The code for these tabs is as follows: $('ul#tabs li a').click(function(){ var id = $(this).attr('id'); var counter = 1; $("ul#tabs a.current").removeClass('cur ...

"PHP error: Accessing an undefined offset index 2

I'm currently working on a code snippet where I need to iterate through an array and replace specific characters within the 'color_codes' values. While the code is functioning correctly, I'm encountering an error message stating undefin ...

Load additional content seamlessly using Ajax in Django without needing to reload the entire navigation bar

I recently started working with Django as I develop my own website. I have created a base.html file which includes the main body, CSS, js, fonts, and navbar that will be present on all pages of my site. The navbar is located in another HTML file called nav ...

Strategies for handling axios responses within a useEffect hook in Reactjs

Currently, I am working with Reactjs and implementing nextjs. I am facing an issue where I am using Axios for fetching data from an API, but I am struggling to display it on the page. To debug this, I have tried using console.log inside the useEffect fun ...

Ways to dynamically update a div with data from a JSON response

I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code. For example: <div id="result" class="card"> <img src="hello.png" ...

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

increasing the size of the drop-down menu width

I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or

In need of a solution where users can input answers to questions and have all the entered data displayed in a popup alongside the respective question. If a user chooses not to answer a question, I do not want that question or any related information to be ...

Extracting a subclass from an array

Currently, I am delving into the world of coding as part of a project I'm working on. Here is an excerpt from my JavaScript code that interacts with Google Maps API: for (i = 0; i < results.length; i++) { console.log("Formatted Address: "+ re ...

How can you show the default calendar for a specific month and year in a Vue3 datepicker?

I've been utilizing the @vuepic/vue3datepicker component, which automatically shows the days of the current month when integrated in my project: <template> <VueDatePicker v-model="date" inline></VueDatePicker> </templ ...

Guide to developing a reusable component or partial in react.js

My first experience with React.js involved a relatively simple task. I started by creating an app.js file that loads the initial page, containing my navigation menu and rendering the children props. However, I realized that instead of keeping the navigat ...

How can you handle undefined values in the query object parameter when using Mongoose's Find function?

Alright: Sound.find({ what: req.query.what, where: req.query.where, date: req.query.date, hour: req.query.hour}, function(err, varToStoreResult, count) { //perform some actions }); Let's consider a scenario where only req.query.what has a ...

Tips on Selecting a Typed Value

When clicking on 'no_results_text' and it's not available in the list, I want to show the searched value from the alert. I have included an onclick method for 'no_results_text', so that the typed value is displayed in the alert. h ...

Conflicts arising between smoothState.js and other plugins

After successfully implementing the smoothState.js plugin on my website, I encountered an issue with another simple jQuery plugin. The plugin begins with: $(document).ready() Unfortunately, this plugin does not work unless I refresh the page. I have gone ...

The ngOnInit function is not triggered upon instantiation of an Injectable class

What could be causing the ngOnInit() method not to be called upon resolution of an Injectable class? Code import {Injectable, OnInit} from 'angular2/core'; import { RestApiService, RestRequest } from './rest-api.service'; @Injectable ...

I am unable to save the data received from the payment API

I've been working on developing an e-commerce system, but I'm facing an issue with the iyzipay payment API. Although I successfully make a request and receive a response from the server, I'm unable to store the data that comes back. Can anyo ...

Ways to guarantee that only one accordion tab is open at a time while keeping it open continuously

Hey everyone, I'm just starting to learn how to code and still getting the hang of using Stack Overflow so please bear with me if my question isn't perfectly formatted. I have created an accordion that is almost functioning correctly, but I need ...

Conceal content after a specific duration and display an alternative in its position, continuously repeating the loop

Imagine creating a captivating performance that unfolds right before your eyes. Picture this: as soon as the page loads, the initial text gracefully fades away after just three seconds. In its place, a mesmerizing animation reveals the second text, which ...

What is the best way to display data in a React application depending on a boolean value?

Being new to React and JavaScript, I am currently struggling with boolean logic. I have a function called Profile which includes two constant methods that each return different data. function Profile(props) { const returnNormalProfile() const return ...