保存一個令人沮喪的簡單Canvas繪製圖像到本地Web文件夾？

Question

我有一個畫布，允許用戶使用畫筆繪製它。

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

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

我有一個網頁sketcher.js和trignometry.js之前裝載兩個相關的js文件。

我需要做的是將任何在畫布上繪製到localstorage或作爲本地文件夾中的臨時文件，每次畫布加載時都可以調用它。

Answer 1

它看起來像你的畫筆圖像污染畫布，並會阻止toDataURL。

您將有：

• 將服務器配置爲在CORS兼容的方式提供您的圖片：http://docs.telerik.com/kendo-ui/howto/use-cors-with-all-modern-browsers

或

• 主機您在雲現場的圖像，已設置服務器標頭以允許跨域共享

在任一事件中，在客戶端側，還必須設置具有瀏覽器中的crossOrigin標誌避免設定爲污點畫布：

brush.crossOrigin="anonymous"; 

brush.src="...";