1

I am trying to generate and save a thumbnail from an uploaded video using VB.Net. I tried a lot of resources before I was given the following Javascript. If you copy and paste it as it is, it works fine but you have to select a local file and it produces a thumbnail. I need it to create the thumbnail from a given url which I pass it from the VB.Net code then save it in same folder. However, I don't really know Javascript.. Just VB.Net. Does anyone know how to do this please? Very much appreciated.

This is the code I have in VB which saves the file once user has uploaded video..

Protected Sub AjaxFileUpload1_UploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs) Handles AjaxFileUpload1.UploadComplete
        'Save the original image
        Dim filename As String = RemoveSpecialChars(e.FileName)
        Dim imageFilename As String = DateTime.Now.Ticks.ToString() + "_" + filename
        Dim acc As New accounts(Membership.GetUser.ProviderUserKey)
        AjaxFileUpload1.SaveAs("E:\kunden\homepages\19\d664110395\www\MyUrl\catalog\videos\" & imageFilename)
End Sub

I've tried passing imagefilename to the javascript but it's looking for input values instead.

<script type='text/javascript'>
document.getElementsByTagName('input')[0].addEventListener('change', function(event) {
  var file = event.target.files[0];
  var fileReader = new FileReader();
  if (file.type.match('image')) {
    fileReader.onload = function() {
      var img = document.createElement('img');
      img.src = fileReader.result;
      document.getElementsByTagName('div')[0].appendChild(img);
    };
    fileReader.readAsDataURL(file);
  } else {
    fileReader.onload = function() {
      var blob = new Blob([fileReader.result], {type: file.type});
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
        }
      };
      video.addEventListener('loadeddata', function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
        }
      });
      var snapImage = function() {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var image = canvas.toDataURL();
        var success = image.length > 100000;
        if (success) {
          var img = document.createElement('img');
          img.src = image;
          document.getElementsByTagName('div')[0].appendChild(img);
          URL.revokeObjectURL(url);
        }
        return success;
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      // Load video in Safari / IE11
      video.muted = true;
      video.playsInline = true;
      video.play();
    };
    fileReader.readAsArrayBuffer(file);
  }
});

</script>


<style>
div {
  line-height: 200px;
}

img {
  max-width: 200px;
  max-height: 200px;
  padding: 5px;
  vertical-align: middle;
  text-align: center;
}

@supports (object-fit: cover) {
  img {
    width: 200px;
    height: 200px;
    object-fit: cover;
  }
}
</style>
mark davies
  • 139
  • 9
  • If you want to make the thumbnail from a remote URL then you'd be far better doing the whole process server-side in VB.net. I can't see any particular need to involve JavaScript – ADyson Jun 11 '19 at 17:38
  • Thanks for the reply. I was trying Javascript because I've looked everywhere for something in VB which I can understand. It probably isn't too difficult but I'm not that clever yet. Any suggestions on the code? Would it be quite involved or fairly simple? – mark davies Jun 11 '19 at 17:55
  • I'm not experienced in this specific issue (I was more thinking about the fact you want to get the data from a remote URL rather than from the user), but a quick google reveals some posts such as [this one](https://stackoverflow.com/questions/15702031/get-thumbnail-image-of-video-file-in-c-sharp) - it's in C# but it's easy to convert from C# to VB.NET, with the help of an [automated tool](http://converter.telerik.com/) if need be. If that doesn't work for you I'm sure you can look up other ways - search for .NET rather than VB.NET specifically, since C# and VB.NET are interchangeable. – ADyson Jun 11 '19 at 20:53
  • Yeah VB would be much easier. I always struggle converting from C#. I will keep looking and investigate ffmeg. Thank you. – mark davies Jun 11 '19 at 23:50
  • Those automatic tools, like the one I linked to, tend to make the c#/VB (and vice versa) conversion a lot easier thankfully, in my experience – ADyson Jun 12 '19 at 06:05

0 Answers0