google slide insert image from sidebar base64

Question

Error: Uncaught ScriptError: Exception: The image you are trying to use is invalid or corrupt.

in sidebar images are coming through api in base64 encoding, once click on image it should insert/(copy/clone) in slide.

my script with url of image is working fine when passing in insertImage() but with base64 as argument its throwing an error working.

Sidebar.html (working fine)

$.ajax({ 
        .......

   $('#images_assets').append($('<li>')
        .attr('data-imgname', v.Id)
        .html([
            $('<img>')
            .attr('class', 'img-mlc1')
            .attr('id', 'img-mlc-' + v.Id)
            .attr('src', 'data:image/png;base64,' + jqXHR.responseText)
            .attr('draggable', false),
            $("<span>").html(v.Id)
        ]));
});

//on click image, i am calling this method

 function cloneImgInSlide(img_src) {
     this.disabled = true;
        $('#error').text('');
        google.script.run.imgInsert(img_src);
 }

Code.js (issue in this script)

function imgInsert(src){
    var slide = SlidesApp.getActivePresentation().getSlides()[0];
    var position = {left: 0, top: 0};
    var size = {width: 300, height: 100};

   //seems error here after this line

    var blob = Utilities.newBlob(src, 'image/png', 'MyImageName');

    slide.insertImage(blob, position.left, position.top, size.width, size.height);  
}

Answer 1

I would like to propose the following modification.

Modification points:

At first, from in sidebar images are coming through api in base64 encoding, once click on image it should insert/(copy/clone) in slide., it supposes that img_src of google.script.run.imgInsert(img_src); is the base64 data.

If img_src of google.script.run.imgInsert(img_src) is the base64 data, when var blob = Utilities.newBlob(src, 'image/png', 'MyImageName') returns the blob of the base64 data. By this, it is considered that such error occurs at slide.insertImage(blob, position.left, position.top, size.width, size.height).

In order to use the image blob in your script, it is required to decode the base64 data.

When your script is modified, it becomes as follows.

Modified script:

Please modify the function of imgInsert at Google Apps Script side. In this modification, the base64 data with and without the header like data:image/png;base64, can be used.

From:

var blob = Utilities.newBlob(src, 'image/png', 'MyImageName');

To:

var checkHeader = src.split(",");
var bytes = Utilities.base64Decode(checkHeader.length == 1 ? src : checkHeader[1]);
var blob = Utilities.newBlob(bytes, 'image/png', 'MyImageName');

Note:

• When above modification didn't resolve the issue, I think that src of imgInsert(src) might not the base64 data. At that time, please confirm it again. And please tell me the detail information.

References:

• base64Decode(encoded)
• newBlob(data, contentType, name)