将图像作为上传文件发送到表单

Question

I had a code that looks like this https://cloth.ardive.id/Tshirt/index.html

I want to send the canvas as an image to a form where user need to fill some addon information (name, category) and in this form image from page before is have been displayed and user doesnt need to upload an image anymore. So when they submit the form, submited form is contains their filled information data with the image

because i want to send the canvas that wasnt an image, so we need to generates the canvas into image, then send it to the form

this is the code to save the image that have been already generated from the canvas to users desktop the code is on canvas2image.js

    // sends the generated file to the client
        var saveFile = function(strData) {
            document.location.href = strData;
        }
    
        var makeDataURI = function(strData, strMime) {
            return "data:" + strMime + ";base64," + strData;
        }
    
        // generates a <img> object containing the imagedata
        var makeImageObject = function(strSource) {
            var oImgElement = document.createElement("img");
            oImgElement.src = strSource;
            return oImgElement;
        }
    
        var scaleCanvas = function(oCanvas, iWidth, iHeight) {
            if (iWidth && iHeight) {
                var oSaveCanvas = document.createElement("canvas");
                oSaveCanvas.width = iWidth;
                oSaveCanvas.height = iHeight;
                oSaveCanvas.style.width = iWidth+"px";
                oSaveCanvas.style.height = iHeight+"px";
    
                var oSaveCtx = oSaveCanvas.getContext("2d");
    
                oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);
                return oSaveCanvas;
            }
            return oCanvas;
        }
    
        return {
    
            saveAsPNG : function(oCanvas, bReturnImg, iWidth, iHeight) {
                if (!bHasDataURL) {
                    return false;
                }
                var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
                var strData = oScaledCanvas.toDataURL("image/png");
                if (bReturnImg) {
                    return makeImageObject(strData);
                } else {
                    saveFile(strData.replace("image/png", strDownloadMime));
                }
                return true;
            }

this is another js to classed the function

//export options
   $('.exportas').click(function(){
        // get type to export
        var to = $(this).data('type');
       // alert(to);
       // get our canvas
       var oCanvas = document.getElementById("mycanvas");  
    // support variable
    var bRes = false;
        if(to == 'png'){
            // export to png 
            bRes = Canvas2Image.saveAsPNG(oCanvas);
        }
        if(to == 'jpg'){
            // maybe in some old browsers it works only on Firefox
            bRes = Canvas2Image.saveAsJPEG(oCanvas);
        }if(to == 'bmp'){
            Res = Canvas2Image.saveAsBMP(oCanvas);
        }
        // if browser doesn't support mimetype alert user
        if (!bRes) {
            alert("Sorry, this browser is not capable of saving " + strType + " files!");
            return false;
        }

and on index.html, its look like this

<!-- export option (png, jpg, bmp) -->
                                <li>
                                    <div class="btn-group dropup">

                                      <a class="dropdown-toggle export btn" data-toggle="dropdown" href="#">
                                        Export
                                        <span class="caret"></span>
                                      </a>

                                      <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" class="exportas" data-type='png'>PNG</a>
                                            <a href="#" class="exportas" data-type='jpg'>JPG</a>
                                            <a href="#" class="exportas" data-type='bmp'>BMP</a>
                                        </li>

so what i wanna ask you is, how to make a code to send the image to form (form is on another pages) with details i have been mentioned above. thanks

</div>

Answer 1

so the image is already uploaded you just have to save it right?`

$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = 'upload';   //2

$tempFile = $_FILES['file']['tmp_name'];          //3             

$targetPath = dirname( __FILE__ ) . $ds. $new_folder . $ds;  //4

$targetFile =  $targetPath. $_FILES['file']['name'];  //5

move_uploaded_file($tempFile,$targetFile); //6

i think you can try something like this in php so this is the upload.php. You have to implement the upload php to your index.html