Canvas.toDaaURL Tainted canvases may not be exported??

do a video screenshot function. After canvas is finished, the picture is changed into a picture and saved locally. It is said that it is a cross-domain problem when checked on the
Internet. My videos and pictures are in my local ah, and then put the pictures on the server, but also reported an error.
here is the code

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">    
    <meta http-equiv=" X-UA-Compatible"  content=" IE=edge,chrome=1/>    
    <!-- <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1">     -->
    
    <!-- <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script>     -->
    <!-- <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script>     -->
    <title>video</title>    
     <script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
    <style>    
        body, html {    
            width: 100%;    
            height: 100%;    
        }    
        video {  
            width: 400px;  
        }  
        canvas {  
            width: 200px;  
        }  
    </style>    
</head>    
<body>    
    <video src="./movie.ogg" controls autoplay></video>  
    <img src="http://169.254.186.44/webwxgetmsgimg.jpg"  crossorigin="anonymous"/>
    <img src="./1.png"  />
    <div class="cut"></div>  

    <canvas></canvas>    
<script>    
    ;$(function() {  
 
            <!-- https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=59125745,2894869156&fm=58 -->

        var $canvas = $("canvas");  
        var $video = $("video");  

        $canvas.attr({  
            width: $video.width(),  
            height: $video.height(),  
        }); 
    
        $video[0].onloadstart = function(e) {  
            console.log(e.srcElement.videoWidth);  
            console.log(this.videoWidth);  
        }  
        var ctx = $canvas[0].getContext("2d");  
        $(".cut").on("click", function() {  
            var w = $video[0].videoWidth;//  
            var h = $video[0].videoHeight;//  
  
            $canvas.attr({  
                width: w,  
                height: h,  
            });  
            
        var img = new Image();
        img.setAttribute("crossOrigin", "anonymous");
        img.src = "https://img.codeshelper.com/upload/img/2021/03/13/rv4geqglgwo7805.jpg";
        img.onload = function () {
            ctx.drawImage($video[0], 0, 0, w, h);  

            var base64 = $canvas[0].toDataURL("images/jpg");  
            console.log(base64);  
        }
            console.log(666)
             
        });  
    
    
    });    
</script>    
</body>  
Mar.13,2021

has been resolved. Canvas.toDataURL must be used on the server side


this is not the case.
your picture address is at the beginning of http://169.254.186.44,
, so if you want to take effect, your web address must also be at the beginning of http://169.254.186.44.
does not mean that http://169.254.186.44 is your native IP. Your web address is visually localhost,. If this is the case, then you can change the image address to localhost

.
Menu