Javascript HTML5画布在非矩形部分裁剪并保存图像

在过去的几天里，我一直在尝试以用户想要的方式裁剪图像……我需要为用户提供一个用户界面，用户可以通过绘制圆或连接点来剪切图像的一部分……因此，我找到了一把小提琴，用户可以在其中绘制点，当他单击“生成”按钮时，就可以使用他想要的部分创建图像收成。。。。。。但是，当我试图获取新生成的画布的dataUrl属性时，该画布具有裁剪图像，它会给我一个错误，上面写着“安全错误：操作不安全。”

我想要新生成的画布的dataUrl属性，这样我就可以获得base64值并将新裁剪的图像保存到文件夹中…有什么方法可以克服这个错误吗…我已经看到了错误，但没有得到任何解决方案…我知道的一件事是它的某个标志被设置为离开画布，这就是为什么我无法获得datUrl财产

这是提琴[它有一个演示，我们可以通过点击图片上的点来裁剪图片….你能更新这个提琴，让我获得新生成画布的dataUrl属性吗？或者任何其他方法也将不胜感激

下面是html

<div id="mainContent">
<div id="canvasDiv">
<br/>
<button id="generate" type="button">Generate
</button> 
</div>
<h1>Result:</h1>
<div class="clipParent" style="float:left;"> 
</div> 
</div>

生成
结果:

下面是脚本

var canvasDiv = document.getElementById('canvasDiv'); 
canvas = document.createElement('canvas'); 
canvas.setAttribute('width', 500); 
canvas.setAttribute('height', 500); 
canvas.setAttribute('id', 'canvas'); 
$(canvasDiv).prepend(canvas); 
if(typeof G_vmlCanvasManager != 'undefined') { 
    canvas = G_vmlCanvasManager.initElement(canvas); 
} 

var context = canvas.getContext('2d'); 
var imageObj = new Image(); 

imageObj.onload = function() {
    $(canvas).attr({width : this.width, height: this.height});
    context.drawImage(imageObj,0,0); 
}; 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

var clickX = new Array(); 
var clickY = new Array(); 
var clickDrag = new Array(); 
var paint; 

function addClick(x, y, dragging) 
{ 
    clickX.push(x); 
    clickY.push(y); 
    clickDrag.push(dragging); 
} 

function redraw(){ 
    canvas.width = canvas.width; // Clears the canvas 
    context.drawImage(imageObj,0,0); 

    context.strokeStyle = "#df4b26"; 
    context.lineJoin = "round"; 
    context.lineWidth = 5; 

    for(var i=0; i < clickX.length; i++) 
    { 
    context.beginPath(); 
    context.arc(clickX[i], clickY[i], 3, 0, 2 * Math.PI, false); 
    context.fillStyle = '#ffffff'; 
    context.fill(); 
    context.lineWidth = 5; 
    context.stroke(); 
    } 
} 

$('#canvas').click(function(e){ 
    var mouseX = e.pageX - this.offsetLeft; 
    var mouseY = e.pageY - this.offsetTop; 

    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); 
    redraw(); 
}); 

$('#generate').click(function(){ 
    $(".clipParent").empty(); 
    $(".clipParent").prepend('<img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" id="genimg" />'); 
    var arr = []; 
    for(var i=0; i < clickX.length; i++){ 
        arr.push(clickX[i]); 
        arr.push(clickY[i]); 
    } 
    $("#genimg")[0].setAttribute("data-polyclip",arr.join(", ")); 
    clickX=[]; 
    clickY=[]; 
    redraw(); 
    polyClip.init(); 
});

var canvasDiv=document.getElementById（'canvasDiv'）； canvas=document.createElement（'canvas'）； canvas.setAttribute（'width'，500）； canvas.setAttribute（'height'，500）； setAttribute（'id'，'canvas'）； $（画布div）.prepend（画布）； if（G_vmlcavasmanager的类型！=“未定义”）{ canvas=G_vmlCanvasManager.initElement（canvas）； } var context=canvas.getContext（'2d'）； var imageObj=新图像（）； imageObj.onload=函数（）{ $（canvas.attr（{width:this.width，height:this.height}）； drawImage（imageObj，0,0）； }; imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; var clickX=新数组（）； var clickY=新数组（）； var clickDrag=新数组（）； var涂料； 功能添加单击（x、y、拖动） { 点击x，推送（x）； clickY.push（y）； 单击拖动。推送（拖动）； } 函数redraw（）{ canvas.width=canvas.width；//清除画布 drawImage（imageObj，0,0）； context.strokeStyle=“#df4b26”； context.lineJoin=“round”； context.lineWidth=5； 对于（变量i=0；i 感谢先进的家伙

“安全错误：操作不安全。”

您不能使用来自其他域的画布图像，只能使用来自源域的图像。

---

请在此处（CORS）阅读相关内容。

顺便说一句，如果任何人对上面链接上的404有问题，只需从末尾删除%5d。该链接非常有用，因此错过它将是一件非常遗憾的事情。