muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.49k stars 1.75k forks source link

Load images faster #749

Open jimmywarting opened 3 years ago

jimmywarting commented 3 years ago

https://github.com/muaz-khan/RecordRTC/blob/ebae1da10f50a521000cbcced5c5adfb96f32411/Canvas-Recording/canvas-designer.js#L2519-L2532

Converting the image to & from base64 is a waste of time, cpu and memory it can do job much faster if you ditch the FileReader and just create a system link to where the raw bytes are instead

img.src = URL.createObjectURL(file)

Optional: If you want you can also use promises instead of using the img.onload

img.decode().then(() => {
  // img done loading, can be painted on the canvas
})

Something even better if you intend to use it on canvas is to createImageBitmap(file).then(paint) instead of using FileReader, or Image. But it is not so much cross compatible