How to insert an external image in an Office addin?

Viewed 320

I would like to insert an image into a PowerPoint slide using setSelectedDataAsync and Office.CoercionType.Image like:

Office.context.document.setSelectedDataAsync(image, {
    coercionType: Office.CoercionType.Image,
    imageLeft: 5,
    imageTop: 5,
    imageWidth: 100,
    imageHeight: 100
});

That system works for assets, I just have to insert the image into a canvas and then convert it to data URL:

const image = new Image();
image.src = props.url;
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);

And then we just insert the canvas to the slide:

var cvs = canvas.current;
var result = cvs.toDataURL().split(",")[1];
Office.context.document.setSelectedDataAsync(result, {
    coercionType: Office.CoercionType.Image,
    imageLeft: 5,
    imageTop: 5,
    imageWidth: canvas.current.width / 3,
    imageHeight: canvas.current.height / 3
});

The problem is that this system does not work for external images. I get the error "SecurityError" because once an external image is inserted in the canvas, the clean-origin flag is set to false. How can I insert external images?

Thank you.

1 Answers

Here is a tutorials to insert an image in your Office Add-in.

Related