0

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);  
}
Naresh
  • 2,761
  • 10
  • 45
  • 78

1 Answers1

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:

Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • thanks for your help, 1 suggestion i am requesting, if i have svg+xml base64 and i want to convert it in png to insert in Google Slide active page, then what would you suggest please. as i read google script will not consider svg+xml to inset and any other operation with slide/sheet/ – Naresh Jul 18 '20 at 16:41
  • 1
    @Puzzled Boy Thank you for replying. I'm glad your issue was resolved. About your new question, if the base64 data is from the SVG, in my case, I create the SVG as a file and convert it to the PNG format using Drive API and put it to the Google Slides, because in the current stage, Google slides cannot directly insert the image of the SVG format. – Tanaike Jul 19 '20 at 01:09