불편한 간단한 캔버스 그려진 이미지를 로컬 웹 폴더에 저장 하시겠습니까?

Question

저는 브러시로 그릴 수있는 캔버스를 가지고 있습니다. 나는 웹 페이지 sketcher.js 및 trignometry.js 전에로드 두 의존 JS 파일이

<canvas id="sketch" width="1024" /> 
<canvas id="draw"/> 

JS

var sketcher = null; 
var brush = null; 


$(document).ready(function(e) { 
localStorage.setItem("clickCount", 0); 
var alpha = localStorage.getItem("alpha"); 
if(!alpha){ 
    alpha = 10; 
} 
alpha = (parseInt(alpha))/10; 
console.log(alpha); 
//Get Brush Opacity 
var power = localStorage.getItem("power"); 
var expo = localStorage.getItem("expo"); 
power = parseInt(power); 
expo = parseInt(expo); 
var opacity = ((expo/100)+ 1) * (power/10)/100; 

console.log(opacity); 
var standBy = localStorage.getItem("standBy"); 
var brushSize = localStorage.getItem("spotDiameter"); 
brush = new Image(); 
brush.src = 'assets/brush_spot_'+ brushSize + '.png'; 
// brush.src = 'assets/brush_spot_'+ brushSize +"_"+ alpha + '.png'; 
if(standBy == "false"){ 
    brush.onload = function(){ 
     sketcher = new Sketcher("sketch", brush); 
     var canvas = document.getElementById('sketch'); 
     var c = canvas.getContext("2d"); 
     c.globalAlpha = opacity; 
    } 
} 

$("#sketch").css("cursor", "url(assets/cursor_spot_"+ brushSize +"_"+ alpha +".ico) 12 12, auto"); 
var clickCount = 0; 
$('#sketch').click(function(e){ 
    if(standBy == "true"){ 
     e.preventDefault(); 
    } 
    else{ 
     clickCount++; 
     localStorage.setItem("clickCount", clickCount); 
     $("#clickCount").text(clickCount); 
    } 


}); 

HTML.

캔버스에 그려지는 모든 내용을 localstorage 또는 캔버스가로드 될 때마다 불러올 수있는 로컬 폴더의 임시 파일로 저장해야합니다.

Answer 1

브러시 이미지가 캔버스에 얼룩 져서 toDataURL을 방지하는 것처럼 보입니다.

당신은해야합니다하십시오 CORS 준수하는 방식으로 이미지를 전달하기 위해

• 서버 구성을 : http://docs.telerik.com/kendo-ui/howto/use-cors-with-all-modern-browsers

또는

• 호스트 구름 사이트에 이미지를 그 도메인 간 공유를 허용하도록 설정된 서버 헤더가 있습니다.

당신은 또한 브라우저를 갖는 crossOrigin 플래그 피할를 설정해야합니다 클라이언트 측에 어느 경우에

는 오염으로 캔버스 설정 :

brush.crossOrigin="anonymous"; 

brush.src="...";