MediaWiki:CardToImage.js

/* jshint esversion: 8 */
/**
 * Convert a base64 string in a Blob according to the data and contentType.
 *
 * @param b64Data {String} Pure base64 string without contentType
 * @param contentType {String} the content type of the file i.e (image/jpeg - image/png - text/plain)
 * @param sliceSize {Int} SliceSize to process the byteCharacters
 * @see https://stackoverflow.com/questions/16245767
 * @return Blob
 */
function cardToImage() {
"use strict";
function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || "";
        sliceSize = sliceSize || 512;

        let byteCharacters = atob(b64Data);
        let byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            let slice = byteCharacters.slice(offset, offset + sliceSize);

            let byteNumbers = new Array(slice.length);
            for (let i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            let byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

      let blob = new Blob(byteArrays, {type: contentType});
      return blob;
}

// Generate screenshot and download
let opt = {
    scrollX: -window.scrollX,
    scrollY: -window.scrollY,
};
let element = document.getElementById("cardCatalog");
html2canvas(element, opt).then(function(canvas) {
    // Generate the base64 representation of the canvas
    let base64image = canvas.toDataURL("image/png");

    // Split the base64 string in data and contentType
    let block = base64image.split(";");
    // Get the content type
    let mimeType = block[0].split(":")[1];// In this case "image/png"
    // get the real base64 content of the file
    let realData = block[1].split(",")[1];// For example:  iVBORw0KGgouqw23....

    // Convert b64 to blob and store it into a variable (with real base64 as value)
    let canvasBlob = b64toBlob(realData, mimeType);

    // Generate file download
    window.saveAs(canvasBlob, "Ficha.png");
});

}