javascript - Send an image with js and html into form -

i had code looks https://cloth.ardive.id/tshirt/index.html

i want send canvas image form user need fill addon information (name, category) , in form image page before have been displayed , user doesnt need upload image anymore. when submit form, submited form contains filled information data image

because want send canvas wasnt image, need generates canvas image, send form.

this how form code lookslike (i'm using wordpress , woocommerce, code html). want navigating form page image uploaded field

<script type="text/javascript">                wpuf_conditional_items.push();            </script>          </li><li class="wpuf-el featured_image" data-label="gambar">        <div class="wpuf-label">              <label for="wpuf-featured_image">gambar <span class="required">*</span></label>          </div>                    <div class="wpuf-fields">              <div id="wpuf-featured_image-upload-container" style="position: relative;"><div class="wpuf-file-warning"></div>                  <div class="wpuf-attachment-upload-filelist" data-type="file" data-required="yes">                      <a id="wpuf-featured_image-pickfiles" data-form_id="4244" class="button file-selector  wpuf_featured_image_4244" href="https://cloth.ardive.id/buat-produk/#" style="position: relative; z-index: 1;">select image</a>                        <ul class="wpuf-attachment-list thumbnails">                                              </ul>                  </div>              <div id="html5_1b67l1c6qtdqmec190711k33v46_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 106px; height: 29px; overflow: hidden; z-index: 0;"><input id="html5_1b67l1c6qtdqmec190711k33v46" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,.jpg,.jpeg,image/gif,.gif,image/png,.png,image/bmp,.bmp"></div></div><!-- .container -->                <span class="wpuf-help">masukkan gambar, gambar harus dengan resolusi tertinggi</span>            </div> <!-- .wpuf-fields -->            <script type="text/javascript">              jquery(function($) {                  new wpuf_uploader('wpuf-featured_image-pickfiles', 'wpuf-featured_image-upload-container', 1, 'featured_image', 'jpg,jpeg,gif,png,bmp', 8000);              });          </script>

this code save image have been generated canvas users desktop code on canvas2image.js

    // sends generated file client      	var savefile = function(strdata) {      		document.location.href = strdata;      	}            	var makedatauri = function(strdata, strmime) {      		return "data:" + strmime + ";base64," + strdata;      	}            	// generates <img> object containing 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 js classed function

//export options     $('.exportas').click(function(){          // type export          var = $(this).data('type');         // alert(to);         // our canvas         var ocanvas = document.getelementbyid("mycanvas");        // support variable      var bres = false;          if(to == 'png'){              // export png               bres = canvas2image.saveaspng(ocanvas);          }          if(to == 'jpg'){              // maybe in old browsers works 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, browser not capable of saving " + strtype + " files!");              return false;          }

and on index.html, 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 wanna ask is, how make code send image form (form on pages) details have been mentioned above. thanks