커서 이미지를 변경할 때 uri가 없습니다.

Question

  function rotateImageOnCanvas(path) { 
      fighterJets = []; 
       var img = new Image(); 
      img.src = path; 
      img.onload = function() { 
      this.width = 30; 
      this.height = 30; 
      var can = document.createElement('canvas'); 
      var ctx = can.getContext('2d'); 
      ctx.drawImage(this, 0, 0, this.width, this.height); 
      for(d=0;d<360;d++) {ctx.rotate(1);fighterJets.push(can.toDataURL());} 
     }; 
     } 

서버에서 이미지를로드하려고합니다. 일단로드되면 캔버스에서 이미지를 회전시키고 서버에 다시 전화 할 필요없이 나중에 사용할 수 있도록 배열에 데이터 URI를 저장합니다. 하지만 데이터 uri로 커서 이미지를 변경하려고하면 파이어 폭스에서 "유효하지 않은 속성 값"을 얻습니다.

parameter.style.cursor = 'url('+fighterJets[90]+') 15 15, auto' 

는 내가 확인하고 데이터 URI (이것은 매우 큰의 나는 그것을 놓칠 수 없다) 매개 변수의 스타일 atribute에 있습니다. 그래서 나는 다음에 무엇을 해야할지 잃어버린다. 나는 canavas의 가난한 understating 및 내가 뭔가 잘못하고있는 용의자 당신은 커서 이미지에 데이터 URI를 할당 할 수 있다면 거기에 어떤 해결 방법입니다. 모든 도움을 환영합니다

Answer 1

많은 시행 착오 끝에 나는 Canavas 크기를 이미지와 일치시키지 않아 유효하지 않은 "유효하지 않은 속성 값"을 얻었고 결과 이미지가 커지면서 커서에 표시되지 않습니다. 아래는 작업 코드입니다.

function rotateFighterJetOnCanvas(path,degrees) { 
     var img = new Image(); 
     img.src = path; 
     img.onload = function() { 
      var can = document.createElement('canvas'); 
      var ctx = can.getContext('2d'); 
      can.width =30;can.height =30; 
      ctx.translate(15, 15); 
      ctx.rotate(Math.radians(degrees)); 
      ctx.imageSmoothingEnabled = false; 
      ctx.drawImage(this, -15, -15, 30, 30); 
      ctx.rotate(-Math.radians(degrees)); 
      ctx.translate(-15, -15); 
      fighterJets.push(can.toDataURL("image/png",1.0)); 
     }; 
    } 
    Math.radians = function(degrees) { 
     return degrees * Math.PI/180; 
    };