Is there a way to convert a data:image URI to just a .jpg file without downloading it?

I am working on a program that contains a canvas, but I want the canvas to save as a .jpg file instead of a data:image/jpeg dfkasd;flaehfoewhfer. The goal is for the user to drag the position of one .png file above another and then that will be translated to a canvas, which will then save itself as a .jpg file so that I can put it into my MySQL database. Is there a way to do that? Here is what I have for my JavaScript:

function translateTo() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var watermark = document.getElementById("watermark");
        watermark.style.opacity = "0.3";
        var top = document.getElementById("show-wm").offsetTop;
        var right = document.getElementById("show-wm").offsetLeft;
        var width = document.getElementById("show-wm").width;
        var height = document.getElementById("show-wm").height;
        ctx.globalAlpha = 0.4;
        ctx.drawImage(watermark, right, top, width, height);
        document.getElementById("url").value = c.toDataURL("image/jpeg", 1.0);
        document.getElementById("watermark-form").submit();
    }

HTML:

    <form action="" method="post" id="watermark-form">
        <input type="hidden" name="image" value="<?php echo $photo_id; ?>">
        <input type="hidden" name="url" value="" id="url">
        <input type="hidden" name="oldpath" value="<?php echo $photo_url; ?>">
    </form>
    <div class="draggable">
        <img id="show-photo" src="https://theexplorerblog.com/images/<?php echo $img; ?>">
        <img id="show-wm" width="220px" src="wide-logo.png" alt="Your Photo">
        <a class="button" href="javascript:translateTo()">Finish</a>
    </div>
<div class="hi">
    <img id="photo" src="https://theexplorerblog.com/images/<?php echo $img; ?>">
    <img id="watermark" width="220px" src="wide-logo.png" alt="Watermark">
</div>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag, so we are unable to make your watermarked photo.
</canvas>

and PHP for the form(I defined connection earlier):

<?php
    if(isset($_POST['url'])){
        $image_id = mysqli_real_escape_string($connection,$_POST['image']);
        $url = $_POST['url'];
        $photourl = mysqli_real_escape_string($connection,$_POST['oldpath']);
        $query = "UPDATE photos SET photo_url='$url',photo_no_wm='$photourl' WHERE id='$image_id'";
        $result = mysqli_query($connection,$query);
        if($result){
            header("location: submitphoto.php?wm=true");
        }
    }
    ?>

When I run this, it makes it into a data:image/jpeg file which is tooooooo long. I would like to make it a short .jpg name.