[英]HTML5 canvas cropping in non-rectangular part and saving image
I have been trying for the past few days to crop a image in a manner the user wants it.....i needed to provide the user with a UI where he can cut a part of a image by drawing circles or by joining points...So i found out a fiddle where user can draw points and when he clicks generate button the image gets created with part he wants to crop...... but when i am trying to get the dataUrl property of the newly generated canvas which has the cropped image it gives me error which says "Security Error: The operation is insecure." 在过去的几天中,我一直在尝试以用户想要的方式裁剪图像.....我需要为用户提供一个UI,在该UI中,他可以通过画圆或连接点来裁剪图像的一部分...所以我发现了一个小提琴,用户可以在其中画点,当他单击“生成”按钮时,将创建他想要裁剪的部分图像……但是当我尝试获取新生成的dataUrl属性时具有裁剪图像的画布会给我错误,提示“安全错误:操作不安全”。
I want the dataUrl property of the newly generated canvas so that i can get the base64 value and save the newly cropped image to a folder...is there any way i can overcome this error....i have goggled the error but dint got any solution....the one thing i came to know is its some flag is set to off canvas which is why m unable to get the datUrl property 我想要新生成的画布的dataUrl属性,以便我可以获取base64值并将新裁剪的图像保存到文件夹...有什么办法可以克服此错误...。有任何解决方案....我知道的一件事是它的某些标志设置为关闭画布,这就是为什么我无法获得datUrl属性的原因
Here is the fiddle [ http://jsfiddle.net/MFELx/] which has demo where we can crop an image by clicking dots on image....can u please update this fiddle to get me the dataUrl property of the newly generated canvas or any other method will also be appreciated 这是小提琴[ http://jsfiddle.net/MFELx/] ,其中有演示,我们可以通过单击图像上的点来裁剪图像。...您能更新此小提琴以获取新生成的dataUrl属性吗?帆布或任何其他方法也将不胜感激
Following is the html 以下是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>
Following is the script 以下是脚本
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();
});
Thanks in advanced guys 谢谢先进的家伙
"Security Error: The operation is insecure."
“安全错误:操作不安全。”
You can't use images for canvas from other domains, only from origin domain. 您不能使用其他域中的画布图像,而只能使用原始域中的图像。 Read about this here http://www.w3.org/TR/cors/#resource-sharing-check-0 (CORS).
在http://www.w3.org/TR/cors/#resource-sharing-check-0(CORS )上了解有关此内容的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.