Add reset / clear canvas link to imahe upload preview

Add reset / clear canvas link to imahe upload preview

I want to add a reset link to tis script that shows a thubnail preview of image upload, can ayone help please?:

  1. function previewImage(el,widths,limit){
  2.     var files = el.files;
  3.     var wrap = el.parentNode;
  4.     var output = wrap.getElementsByClassName('imagePreview')[0];
  5.     var allowedTypes = ['JPG','JPEG','GIF','PNG','SVG','WEBP'];
  6.     output.innerHTML='Loading...';
  7.     var file = files[0];
  8.     var imageType = /image.*/;
  9.     // detect device
  10.     var device = detectDevice();
  11.  
  12.     if (!device.android){ // Since android doesn't handle file types right, do not do this check for phones
  13.         if (!file.type.match(imageType)) {
  14.             var description = document.createElement('p');
  15.             output.innerHTML='';
  16.             description.innerHTML='<span class="KT_field_error" style="font-size:12px;font-weight:bold;">File format not accpeted. Allowed file types are '+allowedTypes.join(', ')+'</span>';
  17.             output.appendChild(description);
  18.             return false;
  19.         }
  20.     }
  21.     var img='';
  22.     var reader = new FileReader();
  23.     reader.onload = (function(aImg) {
  24.         return function(e) {
  25.             output.innerHTML='';
  26.             var format = e.target.result.split(';');
  27.             format = format[0].split('/');
  28.             format = format[1].split('+');
  29.             format = format[0].toUpperCase();
  30.             // We will change this for an android
  31.             if (device.android){
  32.                 format = file.name.split('.');
  33.                 format = format[format.length-1].split('+');
  34.                 format = format[0].toUpperCase();
  35.             }
  36.             var description = document.createElement('p');
  37.             description.innerHTML = '';
  38.             if (allowedTypes.indexOf(format)>=0 && e.total<(limit*1024*1024)){
  39.                 for (var size in widths){
  40.                     var image = document.createElement('img');
  41.                     var src = e.target.result;
  42.                     image.src = src;
  43.                     image.width = widths[size];
  44.                     image.title = 'Image preview '+widths[size]+'px';
  45.                     output.appendChild(image);
  46.                 }
  47.                 }
  48.             if (e.total>(limit*1024*1024)){
  49.             description.innerHTML += '<span class="KT_field_error" style="font-size:12px;font-weight:bold;">Your image exceeds the file size limit of '+limit+'MB</span>';
  50.             }
  51.                
  52.             output.appendChild(description);
  53.         };
  54.     })(img);
  55.     reader.readAsDataURL(file);
  56. }
  57. // Detect client's device
  58. function detectDevice(){
  59.     var ua = navigator.userAgent;
  60.     var brand = {
  61.         apple: ua.match(/(iPhone|iPod|iPad)/),
  62.         blackberry: ua.match(/BlackBerry/),
  63.         android: ua.match(/Android/),
  64.         microsoft: ua.match(/Windows Phone/),
  65.         zune: ua.match(/ZuneWP7/)
  66.     }
  67.     return brand;
  68. }