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

Question

通过重启发这个 ，我已经在手机工作和台式机裁剪图像插件

我所做的是添加了触摸支持，添加了基于图像尺寸的动态画布尺寸，并尝试添加移动图像而不是选择区域的功能，例如此处 。 我想购买该产品，但在设备中的测试用例中失败了（我在这里很抱歉提及）。 因此，考虑定制第一个提到的来源。

这是小提琴 。

我的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);
});

我唯一的问题是，当图像父级按此处滚动时，如何在屏幕上保持选择区域。

谢谢，将不胜感激。

源代码非常适合此处，因此添加了一个有效的小提琴 ..谢谢

编辑

更新了小提琴修正的画布高度和宽度问题

Answer 1

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

在您的代码上方添加此类。 如果只需要一个查看者在页面上，则不需要该类，您可以将所有内容放在一个简单的对象中。 也许您需要更多：

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;

就这样，如果您有任何问题，请告诉我。

Answer 2

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

// look at

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