Есть ли способ конвертировать URI data: image в просто файл .jpg без его загрузки?

Question

Я работаю над программой, которая содержит холст, но я хочу, чтобы холст сохранился как файл .jpg вместо данных: image / jpeg dfkasd; flaehfoewhfer. Цель состоит в том, чтобы пользователь перетянул положение одного файла .png над другим, и затем он будет переведен на холст, который затем сохранится в виде файла .jpg, чтобы я мог поместить его в свою базу данных MySQL. Есть способ сделать это? Вот что у меня есть для моих 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>

и PHP для формы (я определил соединение ранее):

<?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");
        }
    }
    ?>

Когда я запускаю это, оно превращается в файл data: image / jpeg, который слишком длинный. Я хотел бы сделать его коротким .jpg именем.