草庐IT

ruby-on-rails - 回形针调整大小并裁剪为矩形

所以我期待一系列不同尺寸和纵横比的照片。我希望能够缩小/拉伸(stretch)照片以尽可能适合200x100矩形,然后裁剪不适合的其余部分。我希望裁剪也发生在中心周围。这可能吗?我对imagemagick文档感到很困惑。谢谢! 最佳答案 Paperclip的#选项将完全满足您的需求:在指定尺寸内最大程度地适应图像,然后在中心处利用重力裁剪多余部分。例子:has_attached_file:photo,:styles=>{:original=>"200x100#"}注意:如果您想保持原样不变并生成额外的裁剪缩略图,只需将:origin

ruby-on-rails - 如何在 rails 中使用载波 'after the fact' 裁剪图像?

我想做的是上传一张图片,然后将用户带到一个新页面,我将在该页面上使用Jcrop让用户选择他们想要裁剪的图片部分,然后存储该图片。本质上,我想让它成为一个两阶段过程。我知道如何执行javascript部分,并且我了解如何创建此功能的基本流程。但是,我不知道关于如何实现此目的的载波细节。我能找到的最接近的是:image.recreate_versions!但我仍然无法传入高度/宽度和开始x,y来裁剪它。例如,我如何告诉carrierwave在“事后”进行裁剪-即不是在第一次上传图像时?我看到了“处理”图像的方法,但它们会以固定的高度和宽度自动发生。我该如何延迟呢?本质上,我想做的是动态定义

ruby-on-rails - 使用 Paperclip 进行简单裁剪

我想在上传时使用Paperclip裁剪图像,以从原始图片的中心获得方形拇指。我在文档中找到了一种方法,它似乎完全符合我的要求:transformation_to(dst,crop=false)问题是我不知道在哪里使用这个方法。在这里简单地传递一些东西作为参数会很棒:has_attached_file:picture,:styles=>{:medium=>"600x600>",:thumb=>"somethinghere"} 最佳答案 你只需要使用#而不是>作为参数:has_attached_file:picture,:styles=

javascript - javascript 裁剪图像质量差 (croppie)

我正在尝试使用Croppie在将图像上传到服务器之前使用Javascript裁剪图像。它工作得很好,用户界面也很好。但是,在玩演示时,我注意到生成的图像质量比原始图像差得多-我使用的是1920x1080图像。有解决办法吗?我也会接受其他图书馆的推荐:) 最佳答案 如果您正在缩放或旋转图像,一些降级是预料之中的并且是不可避免的。但是,如果您只是从原始图像中裁剪一block......默认CroppieJS将以视口(viewport)大小保存裁剪后的图像。对于1920x1080的大图像,视口(viewport)尺寸(可能)小于原始图像尺

javascript - 用于图像圆形裁剪的 CSS/JS

我的设计师给了我一个外观,我很想能够复制它,但我不太确定该怎么做。第一部分是头像的圆形裁剪(是方形上传)第二部分是对话泡泡我愿意在后端完成第一部分,但更愿意使用CSS/JS解决方案。 最佳答案 对于圆形图像,您可以使用CSS的border-radius:只需使其足够大,使圆Angular接触即可。.profile-img{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}Luke的回答对于对话泡泡来说是一个很好的答案:我已经基于它创建了泡泡。我还使

javascript - 类似于 google+ 相册 View 的动态图像排序和裁剪

有人能帮我找到一个解决方案来实现与googleplusalbumview相同的结果吗??缩略图列表通过重新排序和裁剪图像来保持一致的行宽,使它们始终适合,并根据窗口大小重新排列它们。我知道masonry但当图像大小不同时,它往往会产生大量空白...(因为它不处理裁剪)有人知道有这样的插件吗?或者如果不是它背后的基础数学? 最佳答案 看看:http://blog.vjeux.com/2012/javascript/image-layout-algorithm-google-plus.html它解释了布局的工作原理。另请参阅:http:

javascript - 在 JavaScript 中裁剪一个矩形

我正在尝试编写一个函数,它接受两个重叠的矩形并返回一个矩形数组,这些矩形覆盖了矩形A的区域,但排除了矩形B的区域。我很难弄清楚这个算法的外观就像可能发生的碰撞数量巨大且难以解释。tl;dr我正在尝试使用另一个矩形裁剪一个矩形,从而生成覆盖剩余区域的矩形集合。|-------------||-------------||A||R1|||-------|----||-----|-------|||B||To|R2|||||====>|||||||||-----|-------|||-----||||------------|POSSIBLEOVERLAPPATTERNS|-----||--

javascript - 三.JS对象裁剪?

我正在尝试使用three.js以类似于Unity的方式分割我的3D模型:我一直在摆弄相机控件,当然我可以调整近场/远场以沿相机方向进行剪辑,但是如果我只想在X或Y平面中进行剪辑怎么办?我考虑过可能添加一个可以在该轴上滑动的大透明block,然后使用二进制操作合并/减去它与对象相交的位置,但这些工具最终会沿着新平面创建一个新网格,而不是实际删除沿该平面的所有内容轴。我需要使用多个视口(viewport),还是有更简单的方法? 最佳答案 剪辑可以在着色器中轻松完成。使用一些计算,你甚至可以有一个像裁剪区域这样的球体。在与坐标系正交的平面

javascript - iOS (iPad) 上的 iframe 内容裁剪问题

我正在寻找正确的方法来确保在ipad/iOS5上的iframe中滚动后动态显示的内容可见。OhIframes和iPad-你真是个了不起的老栗子。我知道:iPad将iframe扩展到其中内容的整个高度(几乎就像它使用HTML5的“seamless”属性,但不完全是因为它不从父级继承样式或事件)。对许多人来说很奇怪,很烦人,但却是事实。因此是无用的,因为它根据其内容调整大小,而不是根据容器调整大小我需要将我的iframe包装在一个div中-啦啦或者介绍一些trickery设置框架的滚动位置(我认为这是基于thisarticle中提到的技巧)我的问题是,在iframe主体内动态显示的内容(例

javascript - 在弹出窗口裁剪浏览的图像

请查看http://jsfiddle.net/UmJtB/18/下面的代码$(document).ready(function(){$(".uploadphoto").click(function(){if(document.getElementById('files').files.length==0){alert('SelectanImagefirst');returnfalse;}else{//Whenuploadbuttonispressed,loadthePopupboxFirstloadPopupBox();}$('#popupBoxClose').click(functi