canvas - Обрезка изображений в разных формах

Я работаю над веб-сайтом, который мне нужен, чтобы обрезать изображения на разных фигурах. Я нашел много библиотек, и я тестировал их, но главная проблема заключается в том, что они могут обрезать изображения только на заранее определенных фигурах, таких как прямоугольник, круг. Мне нужно обрезать изображения в любых формах

например, я написал код, который пользователи могут определить своими формами (с помощью области карты), и точная форма делает, Теперь мне нужно обрезать изображение или скопировать эту область и сделать из нее новое изображение.

Я могу использовать php, jquery и другие платформы

Не могли бы вы помочь мне справиться с этой проблемой?

Король С уважением

2
задан mehdi yamani 30 нояб. '14 в 15:50
источник поделиться
1 ответ

Здесь один из способов сделать это с помощью html5 Canvas:

enter image description hereenter image description here

1. Используйте coords элементов 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. Создайте новое изображение() со второго холста... Миссия выполнена!

// 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 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 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 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; }
canvas{border: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>
11
ответ дан markE 30 нояб. '14 в 23:30
источник поделиться

Другие вопросы по меткам