CODEWITHSUNDEEP
javascriptimagebase64pdfmake
Sir HC
Sir HC

Reputation: 57

pdfmake base64 image callback

I have to work with pdfmake to build a pdf preview within my laravel application. I am a javascript noob and going nuts to generate the dataURI for an image in b. Hope you can help me out. How can I get that generated base64 into my docdefinition?

    function convertImageToDataURL(src, callback, outputFormat) {
        // Create an Image object
        var img = new Image();
        // Add CORS approval to prevent a tainted canvas
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
            var canvas = document.createElement('CANVAS');
            var ctx = canvas.getContext('2d');
            var dataURL;
            canvas.height = this.naturalHeight;
            canvas.width = this.naturalWidth;
            ctx.drawImage(this, 0, 0);
            dataURL = canvas.toDataURL(outputFormat);
            callback(dataURL);

            // Mark the canvas to be ready for garbage
            // collection
            canvas = null;
        };

        img.src = src;
        // make sure the load event fires for cached images too
        if (img.complete || img.complete === undefined) {
            // Flush cache
            img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
            // Try again
            img.src = src;
        }
    }

    convertImageToDataURL(
        '{{asset('storage/'.$report->author->enterprises->first()->logo_image)}}',
        function(dataUrl) {
            // console.log('RESULT:', dataUrl);
            // Put dataUrl into DocDefinition here!?!?
            // return dataUrl is undefined
        }
    );`

Upvotes: 3

Views: 2671

Answers (1)

Sir HC
Sir HC

Reputation: 57

Okay. As I said: I am a javascript noob. So I changed the script to this one:

function convertImageToDataURL(imgSrc) {
        img = new Image();
        img.src = imgSrc;
        img.crossOrigin = "Anonymous";

        var canvas = document.createElement("canvas");
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL("image/jpg");

        canvas = null;
        return dataURL;
    }

It might not be beautyful nor elegant, but it works for me.

Upvotes: 2

Related Questions