캔버스를 두 개의 이미지로 저장하는 방법

캔버스에 한 이미지가 배경으로 표시되고 다른 이미지는 이미지의 가운데에 배치됩니다. 지금 나는 완전한 캔버스를 저장하고 싶다. 내 최근의 코드는 캔버스를 두 개의 이미지로 저장하는 방법

당신이 여기 데모를 볼 수 있습니다 .. 그것을 저장하지 않습니다 [ http://jsfiddle.net/himani/gqc9b0qd/3/]

var can = document.getElementsByTagName('canvas')[0]; 
    var ctx = can.getContext('2d'); 
    ctx.strokeStyle = '#f00'; 
    ctx.lineWidth = 6; 
    ctx.lineJoin = 'round'; 
    ctx.strokeRect(40,100,150,100); 
    var angleInDegrees=0; 
    var img = document.getElementsByTagName('img')[0]; 
img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg"; 
    ctx.drawImage(img,40,100,150,100); 

function drawRotated(degrees){ 
     ctx.clearRect(0,0,300,300); 
     ctx.save(); 
     ctx.translate(40+150/2,100+100/2); 
     ctx.rotate(degrees*Math.PI/180); 
    ctx.strokeRect(-150/2,-100/2,150,100); 
     ctx.drawImage(img,-150/2,-100/2,150,100); 
     ctx.restore(); 
    } 
$("#clockwise").click(function(){ 
     angleInDegrees+=30; 
     drawRotated(angleInDegrees); 
    }); 

$("#save").click(function(){ 

       var ua = window.navigator.userAgent; 

       if (ua.indexOf("Chrome") > 0) { 
        // save image without file type 
      var canvas = document.getElementsByTagName('canvas')[0]; 
        document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

        // save image as png 
        var link = document.createElement('a'); 
        link.download = "test1.png"; 
        link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");; 
        link.click(); 
       } 
       else { 
        alert("Please use Chrome"); 
       } 


    });

출처

2015-01-19 Himani Verma

원본 교차 제한 오류 보안 오류로 인해 저장에 실패했습니다. 캔버스에 그린 모든 이미지는 웹 페이지 자체와 동일한 도메인에서 가져와야합니다. 캔버스에 다른 도메인의 이미지를 그릴 수는 있지만 그렇게하면 더 이상 canvas.toDataURL()을 할 수 없습니다. – markE

@ markE 그런 다음 올바른 것을하기 위해 할 수있는 일은 무엇입니까? –

웹 페이지와 동일한 도메인의 이미지를 제공해야합니다. – markE

당신이 crossOrigin을 정의하려고, 크로스 원산지 요청에서 toDataUrl 이미지로 내보내려면 이미지의 속성

var img = document.getElementsByTagName('img')[0];  
    img.crossOrigin = "anonymous"; 

    img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg"; 

    img.onload = function() { 
     ctx.drawImage(img,40,100,150,100); 
    };

그것은 나를 위해 잘 작동했습니다. 이 속성 및 availables 값에 대한 자세한 내용은 다음을 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes

출처

2015-01-19 14:17:32 DePhiless

@ DePhileses img.crossOrigin line이 문제를 일으키고 있습니다. 회전하는 이미지가이 이미지를 표시하지 않으며 두 번째 클릭 후 이미지 버튼을 클릭하면 회전하고 회전을 멈추고 저장 버튼을 클릭하면 붉은 색 테두리 만 저장됩니다. ,하지만 전체 캔버스 저장을 원한다. 가능하다, 내가 뭘 원하는 .. ?? –

@ DePhileses 여기에 제가이 예제를 가지고 있습니다. 그러나 이것 또한 노란색의 원이 그 이미지 [http://codepen.io/anon/pen/ramKpv]와 함께 저장되지 않습니다.하지만 두 가지를 모두 저장하고 싶습니다. –

캔버스를 두 개의 이미지로 저장하는 방법

답변

관련 문제