                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas玩转图像处理

Uncaught ReferenceError: cnavasa is not defined

var imagedate=contexta.getImageData(0,0,canvasa.width,cnavasa.height);为什么会报错求解

现实PK理想

2015-09-24

源自：Canvas玩转图像处理 4-1

关注问题我要回答

3719

操作

收起

4 回答

杜新明
2016-11-24

在本机搭建的web服务器环境下运行

0 回复有任何疑惑可以回复我~

收起回答

现实PK理想提问者
2015-09-25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>
<div style="margin: 20px auto; width:1700px;">
        <canvas id="canvasa" width="800" height="560" style="display:block;float:left;border:1px solid #aaa;">
        </canvas>

        <canvas id="canvasb" width="800" height="560" style="display:block;float:right;border:1px solid #aaa;">
        </canvas>
</div>
    <a href="javascript:filter()">filter</a>
    <script language="javascript">
    var canvasa=document.getElementById("canvasa");
   var contexta=canvasa.getContext("2d");

   var canvasb=document.getElementById("canvasb");
   var contextb=canvasb.getContext("2d");
   var img=new Image()
   window.onload=function(){
       img.src="css精美案列/55d4263e00019bed00000000/canvas-image/05-image-filter/autumn.jpg";
       img.onload=function(){
           contexta.drawImage(img,0,0,canvasa.width,canvasa.height);
           }
       }
   function filter(){

//下面这句话一直报错原因是未能执行“getImageData”“CanvasRenderingContext2D“，

var imagedata=contexta.getImageData(0,0,canvasa.width,canvasa.height);

                contextb.putImageData(imagedata,0,0,0,0,canvasb.height,canvasb.width);
               console.log("ok");
           }
    </script>
</body>
</html>