JSFiddle - React, Tailwind, and code Playground

HTML

<a id="downloadlink">Download</a>

JavaScript

// Wir erzeugen ein beliebiges Bild
var image = new Image();
// Wir müssen unbedingt die Same Origin Policy beachten, weil es sonst zu Fehlern kommen kann. Wir benutzen für unser Beispiel einfach das jsFiddle-Logo
image.src = '/img/logo.png';

// Wir wollen unseren Download-Link dann updaten, wenn das Bild vollständig geladen ist
image.addEventListener('load', createDownloadLink );

function createDownloadLink( loadEvent ) {
    
    // Wir erzeugen uns jetzt ein Canvas-Element, das wir nur benutzen werden, um eine data-URL unseres Bildes zu erzuegen
    var canvas = document.createElement('canvas');
  
    // Das Canvas muss selbstverständlich, die selben Dimensionen haben, wie unser Logo
    canvas.width = image.width;
    canvas.height = image.height;
    
    // Der Context ist die eigentliche Magie, die wir zum Zeichnen brauchen.
    var context = canvas.getContext('2d');    

    // Wir zeichnen das Bild in die linke, obere Ecke der Leinwand. Das sollte dann genau passen
    context.drawImage( image, 0, 0 );

    // Die folgende Zeile erzeugt uns die Data-URL. Um unser Beispiel etwas mehr Würze zu verliehen, sagen wir noch, dass wir jpeg-Bild haben möchten. Die 1 gibt die Qualität an, 1 heißt beste Qualität, 0 bedeutet schlechteste    
    var imageDataURL = canvas.toDataURL('image/jpeg',1);
    
    // Fast fertig, wir müssen nur noch den Link aktualisieren
    var link = document.querySelector('#downloadlink');
    
    link.href = imageDataURL;
    link.download = 'foo.jpg';
    
}