canvas.toDaaURL Tainted canvases may not be exported??

做一個(gè)視頻截圖功能，canvas畫(huà)完變成圖片保存到本地，
網(wǎng)上查了說(shuō)是跨域問(wèn)題。我的視頻和圖片都是在我本地的啊，后來(lái)把圖片放到了服務(wù)器上，也是報(bào)錯(cuò)。。。
下面是代碼

<!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" >     -->
    
    <!-- <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">點(diǎn)擊截屏</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 = 'http://169.254.186.44/webwxgetmsgimg.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>

回答

編輯回答

葬愛(ài)

已經(jīng)解決了。canvas.toDataURL 必須在服務(wù)器端用才行

2017年11月10日 13:06

編輯回答

凹凸曼

并不是這樣的。
你的圖片地址是，http://169.254.186.44 開(kāi)頭，
所以如果想要生效，你的網(wǎng)頁(yè)地址也必須是http://169.254.186.44 開(kāi)頭，
并不是說(shuō)http://169.254.186.44 是你本機(jī)IP就行了，你的網(wǎng)頁(yè)地址目測(cè)是localhost，如果是這樣，那么你把圖片地址也改成localhost就可以了

2017年11月21日 03:27