受到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固定画布高度和宽度问题
答案 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