toDataURL throw Uncaught Security exception in HTML

The toDataURL() method throws an "Uncaught Security Exception" when trying to convert images from external domains to base64. This happens due to CORS (Cross-Origin Resource Sharing) restrictions that prevent accessing pixel data from cross-origin images.

The Problem

When you load an image from a different domain and try to use toDataURL(), the browser blocks access to prevent potential security vulnerabilities:

<img id="myImage" src="https://example.com/image.jpg">

<script>
function getBase64() {
    var img = document.getElementById("myImage");
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    
    canvas.width = img.width;
    canvas.height = img.height;
    
    ctx.drawImage(img, 0, 0);
    
    // This will throw: Uncaught DOMException: Failed to execute 'toDataURL'
    var dataURL = canvas.toDataURL("image/png");
}
</script>

Solution: Using crossorigin Attribute

Add the crossorigin="anonymous" attribute to the image element. This tells the browser to request the image with CORS headers, allowing pixel access if the server permits it:

<img id="myImage" crossorigin="anonymous" src="https://www.tutorialspoint.com/images/seaborn-4.jpg">

<script>
function getBase64() {
    var img = document.getElementById("myImage");
    var canvas = document.createElement("canvas");
    
    canvas.width = img.width;
    canvas.height = img.height;
    
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    
    var dataURL = canvas.toDataURL("image/png");
    console.log("Base64 data:", dataURL.substring(0, 50) + "...");
    
    // Extract only the base64 part (without data:image/png;base64,)
    var base64Only = dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
    console.log("Pure base64:", base64Only.substring(0, 50) + "...");
}

// Wait for image to load before converting
document.getElementById("myImage").onload = function() {
    getBase64();
};
</script>

Alternative: Loading Image Programmatically

You can also create the image element dynamically and set the crossorigin before loading:

<script>
function convertImageToBase64(imageUrl) {
    var img = new Image();
    img.crossOrigin = "anonymous";
    
    img.onload = function() {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        
        canvas.width = img.width;
        canvas.height = img.height;
        
        ctx.drawImage(img, 0, 0);
        
        var dataURL = canvas.toDataURL("image/png");
        console.log("Conversion successful!");
        console.log("Data URL length:", dataURL.length);
    };
    
    img.onerror = function() {
        console.error("Failed to load image or CORS not allowed");
    };
    
    img.src = imageUrl;
}

// Example usage
convertImageToBase64("https://www.tutorialspoint.com/images/seaborn-4.jpg");
</script>

Key Points

• The server hosting the image must allow CORS requests
• Set crossorigin="anonymous" before setting the src attribute
• Always wait for the onload event before accessing image data
• Handle onerror events for better error handling

Browser Compatibility

Conclusion

The Security Exception occurs due to CORS restrictions when accessing cross-origin image data. Using crossorigin="anonymous" resolves this issue, provided the server allows CORS requests.