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

Posted 2023-02-25

【中文标题】HTML5 画布在非矩形部分裁剪并保存图像

【英文标题】：HTML5 canvas cropping in non-rectangular part and saving image

【发布时间】：2014-05-24 10:45:41

【问题描述】：

过去几天我一直在尝试以用户想要的方式裁剪图像.....我需要为用户提供一个用户界面，他可以通过绘制圆圈或通过加入点......所以我发现了一个小提琴，用户可以在其中绘制点，当他点击生成按钮时，图像被创建为他想要裁剪的部分......但是当我试图获取 dataUrl 属性时新生成的具有裁剪图像的画布给我一个错误，上面写着 “安全错误：操作不安全。”

我想要新生成的画布的 dataUrl 属性，以便我可以获取 base64 值并将新裁剪的图像保存到文件夹中......有什么办法可以克服这个错误......错误，但 dint 有任何解决方案....我知道的一件事是它的某些标志设置为关闭画布，这就是为什么我无法获得 datUrl 属性

这是小提琴 [http://jsfiddle.net/MFELx/]，它有演示，我们可以通过单击图像上的点来裁剪图像....你可以更新这个小提琴来获取新生成的画布的 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(); 
);

感谢高手们

【问题讨论】：

顺便说一句，如果有人对上面链接上的 404 有问题，只需从末尾删除 %5d 即可。该链接非常有用，因此错过它会很遗憾。

【参考方案1】：

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

您不能将来自其他域的图像用于画布，只能使用来自原始域的图像。 在此处阅读此内容 http://www.w3.org/TR/cors/#resource-sharing-check-0 (CORS)。