How to apply crossOrigin to the canvas element and <img> tag

I have this code - executing it always calls a security exception - how to get around it

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

</head>
<body cz-shortcut-listen="true">

<table id="preview-table" style="background-image:url('cat.jpg');background-size:250px;background-repeat:no-repeat;" >
  <tbody><tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
</tbody></table>

<img src="" id="image" >
<button id="export">Table Export</button>

<script src="Insert%20title%20here_pliki/jquery.js"></script>
<script type="text/javascript" src="Insert%20title%20here_pliki/tableExport.js"></script>
<script type="text/javascript" src="Insert%20title%20here_pliki/html2canvas.js"></script>

<script type="text/javascript">

$('#export').on('click', function() {
    console.log('exporting');
    //$('#preview-table').tableExport({type:'png',escape:'false'});
    html2canvas($('#preview-table'), {
        onrendered: function(canvas) {
             img = canvas.toDataURL("image/png");
            //var img = canvas.toDataURL("application/octet-stream");
    
            var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
            //window.open(url);
            //saveAs(uri, 'tableExport.png');
            //alert(uri);
            
            $("#image").attr("src",uri);    
            
        }
    }); 
});

</script>



</body></html>

The point is that ultimately I want to make a table with a background photo or any html to be rendered to the image and to appear as base64 in the tag as the src attribute

Everything is nice and almost would work if it wasn't for this security exception CORS - I don't know how to avoid it

I don't know what element to apply crossOrigin = "anonymous"

I tried to add an img element and use crossorigin for her but that didn't help - which is what I'm doing wrong

Here is a working script, but unfortunately the image is not saved - I don't know how to get around it. The point is that the site will run directly from disk without running it from the server.

https://jsfiddle.net/xfwtma3e/#&togetherjs=cJR1skRMib

The site is supposed to run from disk and replace the table with the background image with a photo (I'll make some extra work later) but I have a problem with the DOM error exception - "Uncaught (in promise) DOMException: The operation is insecure".