跨平台画布图像缩放和裁剪使选择区域固定

时间:2014-05-23 19:09:52

标签: javascript

受到this的大力启发,我制作了一个适用于移动设备和桌面的插件来剪裁图像

我所做的是添加触摸支持,根据图像尺寸添加动态画布大小,并尝试添加移动图像的功能,而不是像here这样的选择区域。我想购买这个项目,但它在设备上的测试用例失败了(我很抱歉在这里提到)。所以想到定制第一个提到的来源。

这是fiddle

我的HTML是

<div class="container">
   <canvas id="panel" width="779" height="519"></canvas>
</div>

<input type="button" value="crop Selection" id="crop-image" />

<img id="croppedSelection" height="100px" width="100px" />

并称之为

var Cropper = new CanvasCrop(document.getElementById('panel'), 'http://www.script- tutorials.com/demos/197/images/image.jpg');

$('#crop-image').on('click', function(){
   var src = Cropper.getBase64();
   $('#croppedSelection').attr('src', src);
});

我现在唯一的问题是,当图像父级滚动为here时,如何在屏幕上保留选择区域。

谢谢,非常感谢帮助。

源代码非常适合这里,所以添加了一个有效的fiddle ..谢谢

修改

更新了fiddle固定画布高度和宽度问题

2 个答案:

答案 0 :(得分:3)

我写这段代码是因为我很无聊。

在代码上方添加此类。如果您只想在页面上有一个查看器,则不需要该类,您可以将它们全部放在一个简单的对象中。也许你需要更多:

function viewer (html_viewer)
    {
    this.html_viewer=html_viewer;
    Object.defineProperty (html_viewer,"viewer_instance",{writeable:false,configureable:false,enumerable:false,value:this});
    this.Selections=new Array ();
    html_viewer.addEventListener ("mousedown",this.startScrolling);
    html_viewer.addEventListener ("mouseup", this.endScrolling);
    html_viewer.addEventListener ("scroll",this.setSelectionPosition);
    }

viewer.prototype.startScrolling=function ()
    {
    var Selections=this.viewer_instance.Selections, Selection;
    var l=Selections.length;

    for (var i=0;i<l;i++)
        {
        Selection=Selections[i];
        Selection.startLeft=Selection.x;
        Selection.startTop=Selection.y;
        Selection.viewer_startScrollLeft=this.scrollLeft;
        Selection.viewer_startScrollTop=this.scrollTop;
        }
   }

viewer.prototype.setSelectionPosition=function ()
  {
  var Selections=this.viewer_instance.Selections, Selection;
  var l=Selections.length;
  for (var i=0;i<l;i++)
    {
    Selection=Selections[i];
    Selection.x=this.scrollLeft-Selection.viewer_startScrollLeft+Selection.startLeft;
    Selection.y=this.scrollTop-Selection.viewer_startScrollTop+Selection.startTop;
    }

  this.viewer_instance.drawScene ();
  }

 viewer.prototype.endScrolling=function ()
   {
   var Selections=this.viewer_instance.Selections, Selection;
   var l=Selections.length;

   for (var i=0;i<l;i++)
     {
     Selection=Selections[i];
     Selection.startLeft=null;
     Selection.startTop=null;
     Selection.viewer_startScrollLeft=null;
     Selection.viewer_startScrollTop=null;
     }
   }

 viewer.prototype.addSelection=function (Selection)
    {
    Selection.startLeft=null;
    Selection.startTop=null;
    Selection.viewer_startScrollLeft=null;
    Selection.viewer_startScrollTop=null;
    Selection.viewerIndex=this.Selections.length;
    this.Selections.push (Selection);
    }

 viewer.prototype.removeSelection=function (viewerIndex)
    {
    var Selections=this.Selections, l=Selections.length, i;
    Selection=Selections[viewerIndex];
    delete Selection.startLeft;
    delete Selection.startTop;
    delete Selection.viewer_startScrollLeft;
    delete Selection.viewer_startScrollTop;
    delete Selection.viewerIndex;

  for (i=viewerIndex+1;i<l;i++)
    Selections[i].viewerIndex=i-1;  

  Selections.splice (viewerIndex,1);
    }

var imageViewer= new viewer (document.getElementById("panel").parentNode);

第27行之后     theSelection = new Selection(64,64,64,64);

添加

imageViewer.addSelection (theSelection);
imageViewer.drawScene=drawScene;

这就是全部,如果您遇到问题请告诉我。

答案 1 :(得分:2)

需要进一步讨论如何实现图像裁剪。你想在画布中选择一个,还是想要调整整个imageCropper容器的大小并进行裁剪

// look at

http://jsfiddle.net/ThorstenArtnerAustria/5qdDW/1/