canvas- 裁剪不同形状的图像

Posted

技术标签:

【中文标题】canvas- 裁剪不同形状的图像【英文标题】:canvas- Cropping images in different shapes 【发布时间】:2015-01-28 13:46:54 【问题描述】:

我正在开发一个需要裁剪不同形状图像的网站。 我发现了很多库并且我已经测试了一些,但主要问题是它们只能在矩形、圆形等预先定义的形状上裁剪图像。我需要的是裁剪任何形状的图像

例如,我编写了一个代码,用户可以定义他们的形状(通过使用地图区域)并制作确切的形状,现在我需要裁剪图像或复制该区域并从中制作新图像。

我可以使用php、jquery等平台

你能帮我解决这个问题吗?

国王的问候

【问题讨论】:

对不起,什么是地图区域?您是指<map><area> 标签吗?能否贴一些示例代码(不是全部,只是一点点),以便我们更清楚地理解? @soktinpk 是的,完全正确。我的意思是 和 标签。我现在不在电脑上,所以我无法发送代码,但我会尽快发布它们 您可能需要使用某种clip() 函数:developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/… 【参考方案1】:

这是使用 html5 Canvas 的一种方法:

1.使用 area 元素的coords 在画布上绘制路径。

// assume you've put the `coords` points as x:,y: objects into a points[] array:

    ctx.beginPath();
    ctx.moveTo(points[0].x,points[0].y);
    for(var i=1;i<points.length;i++)
        var p=points[i];
        ctx.lineTo(points[i].x,points[i].y);
    
    ctx.closePath();

2。从您刚刚定义的coords 路径创建一个剪切路径:

    ctx.clip();

3.在画布上绘制图像。图像将被剪辑到您定义的路径中:

     ctx.drawImage(yourImageObject,0,0);

4.创建第二个画布,其大小与剪切路径大小相同,并使用 context.drawImage 的剪切版本将剪切后的图像仅绘制到第二个画布上。

// see demo below for details 

5.从第二个画布创建一个新的 Image()...任务完成!

// create a new Image() from the second canvas

    var clippedImage=new Image();
    clippedImage.onload=function()
        // append the new image to the page
        document.body.appendChild(clippedImage);
    
    clippedImage.src=secondCanvas.toDataURL();

带注释的示例代码和演示:

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

// set some canvas styles
ctx.strokeStyle='black';

// an array to hold user's click-points that define the clipping area
var points=[];

// load the image 
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/houses1.jpg";
function start()

  // resize canvas to fit the img
  cw=canvas.width=img.width;
  ch=canvas.height=img.height;

  // draw the image at 25% opacity
  drawImage(0.25);

  // listen for mousedown and button clicks
  $('#canvas').mousedown(function(e)handleMouseDown(e););
  $('#reset').click(function() points.length=0; drawImage(0.25); );




function handleMouseDown(e)

  // tell the browser that we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // calculate mouseX & mouseY
  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  // push the clicked point to the points[] array
  points.push(x:mx,y:my);

  // show the user an outline of their current clipping path
  outlineIt();

  // if the user clicked back in the original circle
  // then complete the clip
  if(points.length>1)
    var dx=mx-points[0].x;
    var dy=my-points[0].y;
    if(dx*dx+dy*dy<10*10)
      clipIt();
    
  



// redraw the image at the specified opacity
function drawImage(alpha)
  ctx.clearRect(0,0,cw,ch);
  ctx.globalAlpha=alpha;
  ctx.drawImage(img,0,0);
  ctx.globalAlpha=1.00;


// show the current potential clipping path
function outlineIt()
  drawImage(0.25);
  ctx.beginPath();
  ctx.moveTo(points[0].x,points[0].y);
  for(var i=0;i<points.length;i++)
    ctx.lineTo(points[i].x,points[i].y);
  
  ctx.closePath();
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(points[0].x,points[0].y,10,0,Math.PI*2);
  ctx.closePath();
  ctx.stroke();


// clip the selected path to a new canvas
function clipIt()

  // calculate the size of the user's clipping area
  var minX=10000;
  var minY=10000;
  var maxX=-10000;
  var maxY=-10000;
  for(var i=1;i<points.length;i++)
    var p=points[i];
    if(p.x<minX)minX=p.x;
    if(p.y<minY)minY=p.y;
    if(p.x>maxX)maxX=p.x;
    if(p.y>maxY)maxY=p.y;
  
  var width=maxX-minX;
  var height=maxY-minY;

  // clip the image into the user's clipping area
  ctx.save();
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.moveTo(points[0].x,points[0].y);
  for(var i=1;i<points.length;i++)
    var p=points[i];
    ctx.lineTo(points[i].x,points[i].y);
  
  ctx.closePath();
  ctx.clip();
  ctx.drawImage(img,0,0);
  ctx.restore();

  // create a new canvas 
  var c=document.createElement('canvas');
  var cx=c.getContext('2d');

  // resize the new canvas to the size of the clipping area
  c.width=width;
  c.height=height;

  // draw the clipped image from the main canvas to the new canvas
  cx.drawImage(canvas, minX,minY,width,height, 0,0,width,height);

  // create a new Image() from the new canvas
  var clippedImage=new Image();
  clippedImage.onload=function()
    // append the new image to the page
    document.body.appendChild(clippedImage);
  
  clippedImage.src=c.toDataURL();


  // clear the previous points 
  points.length=0;

  // redraw the image on the main canvas for further clipping
  drawImage(0.25);
body background-color: ivory; 
canvasborder:1px solid red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click to outline clipping region.<br>Click back in starting circle to complete the clip.</h4>
<button id=reset>Reset clipping path</button><br>
<canvas id="canvas" width=400 height=300></canvas>
<p>Clipped images by user</p>

【讨论】:

非常感谢您的帮助,这正是我所需要的。只是另一个问题,有什么办法可以保存剪切的图像吗?我知道我可以右键单击并单击保存图像,但我想将其保存在我的虚拟主机上 @mehdiyamani 不客气,很高兴我能帮上忙。在服务器上保存客户端图像的常用方法是使用 AJAX。配置服务器超出了这个问题的范围,但我怀疑这是您的虚拟主机用户论坛上经常被问到的问题。祝你的项目好运! 嗨@mar​​kE,我无法成功运行你的脚本,你能把你的代码放在某个地方,这样我就可以像在 jsfiddle 中一样尝试它们了吗?

以上是关于canvas- 裁剪不同形状的图像的主要内容,如果未能解决你的问题,请参考以下文章

canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)

canvas裁剪

裁剪图像并将其分层在第二个 canvas-imagemagick 中的某个位置

裁剪图像时,新图像获取canvas padding fabric js

jCrop HTML5 Canvas Base64

关于canvas绘制图像模糊问题