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"/>

我有两个依赖的js文件，它们在网页sketcher.js和trignometry.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="...";

将令人沮丧的简单画布绘制图像保存到本地Web文件夹？

1 个答案: