[laimas]

А если так

И получается так? И не получится. Чтобы задать размер канве, нужно дождаться окончания загрузки изображения. Задание атрибута crossOrigin изображению разрешит загрузить его в канву, а вот при получении его эта ошибка возникать будет, хотя и данные будут возвращены. Чтобы не надоедало, можно обернуть в try ... catch.

function getImg(im) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        
    canvas.width = im.width;
    canvas.height = im.height;
        
    try {
        ctx.drawImage(im, 0, 0);
        //base64 to localStorage
        var imageData = canvas.toDataURL();
        console.log(imageData);
    } catch (e) {}
}

<img id="imageId" crossOrigin="*" src="https://unsplash.it/300/200/?random" onload="getImg(this)"/>

Одно ли изображение, а значит и элементов сохранения, я не в курсе, как и о применении самого скрипта. Пример простой, разберетесь сами чего вам надо.

PS. toDataURL("image/png") - это лишено смысла, так как по умолчанию тип возвращаемого изображения и будет png, задание типа имеет смысл, если нужно вернуть в jpeg формате.

PPS. crossOrigin - заголовок, который передается сервером, и равен либо конкретному домену, либо всем (*). У изображения же можно написать просто crossOrigin и все. А если говорить о локальном приложение, то тогда либо VBS, либо если под win, можно HTA-приложение, и никаких ограничений не будет.