标签: jcrop
jcrop预览包含奇怪的错误
我的jcrop预览需要帮助.我正在关注railscast#182的这个教程,但是出了点问题,我似乎可以搞清楚.这有点难以解释,但裁剪预览不起作用,第二张图像出现在裁剪调整大小手柄内.随着作物的大小调整,这个额外的图像会拉伸和倾斜.由于这有点令人困惑,我的应用程序仍然在我的本地机器上,我已经包含了当前功能的视频演示 以及我假设的以下所有相关代码.
我还发送了一封电子邮件给jcrop,他们建议这可能是由于我的预览区域出错.我认为这是正确的,因为我目前正在使用Ryan Bates的railscasts tut提供的那个.我认为唯一可能是问题的是"attr_accessible"和"attr_accessor".我是ruby和rails的新手,所以我在理解错误时遇到了一些困难.非常感谢任何帮助,如果我能提供任何进一步的信息,请告诉我.
首先是我的avatar_uploader.rb
class AvatarUploader < CarrierWave::Uploader::Base
include CarrierWave::RMagick
storage :file
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
version :large do
resize_to_limit(600, 600)
end
version :thumb do
process :crop
resize_to_fill(100, 100)
end
version :mini do
process :crop
resize_to_fill(48, 48)
end
version :nano do
process :crop
resize_to_fill(20, 20)
end
def crop
if …推荐指数
解决办法
查看次数
JCrop调整图像大小而不是裁剪 - Javascript
我正在尝试使用JCrop裁剪图像.然而结果是令人沮丧的错误,我不知道为什么.我有一个图像上传器,当有人在图像中选择时,javascript会更改页面上已有图像的来源以匹配新上传的图像.然后我有这个代码:
$('#myForm').ajaxForm({
dataType: 'json',
success: function (result) {
$("#image-editor-preview img")
.attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
.Jcrop({
aspectRatio: 1,
setSelect: [100, 100, 50, 50],
minSize: [160, 160],
maxSize: [160, 160],
onChange: setCoords,
onSelect: setCoords
});
}
});
var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
x = c.x;
y = c.y;
w = c.w;
h = c.h;
};
然而,这是发生的事情:
我尝试了很多来解决这个问题,但最终的结果总是一样的.有人有主意吗？谢谢.
推荐指数
解决办法
查看次数
是否可以在选择框更改时设置/更新jCrop纵横比？
是否可以在选择框更改时设置/更新jCrop纵横比？我已经添加了一个比率和选择变量,并且静态工作得很好,但是当select选择警告正确的值时,无法使其适用于选择更改
jQuery(function ($) {
var ratio = 4 / 3
var selection = '[0,0,4,3]';
$("#ratio").change(function () {
var text = $(this).find(':selected').text();
ratio = text;
val = $(this).val();
selection = '[0,0,' + val + ']';
alert(ratio)
}).trigger('change');
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init', …推荐指数
解决办法
查看次数
Jcrop大图像真实尺寸
我在使用jCrop时遇到问题...
如果我上传图片,例如1024x768,他将获得我的大部分浏览器.那么我为了转身做了什么？
<div style="width:300px;height:300px;(Just examples!)">
<img> bla bla
</div>
现在它正在工作,但现在,我需要图像的实际尺寸.基本上,我有一个div包含我想裁剪的图像,但我想要它们的真实大小..
我已经尝试过的一些事情:
试图使div用overflow:scroll,问题是,当我在裁剪,我想,在裁剪时,当我到达div的限制,他滚动,而我是怎么回事..
一些帮助将是有用的.(抱歉英文不好)
推荐指数
解决办法
查看次数
Jcrop裁剪图像无法正常工作,裁剪错误的部分
我使用jcrop裁剪图像.下面的代码包含客户端代码,它将图像和坐标一起发送到服务器端进行裁剪.据我所知,jcrop代码看起来很好,但没有返回正确的结果.
在此工作数小时但没有任何成功.搜索谷歌等但没有成功.任何帮助将深表感谢.
<html>
<form id="frm1" action="jcropServer.php" method="post" enctype="multipart/form-data" >
<img id="img1"/>
<label> <input type="text" size="4" id="x" name="x" /></label>
<label><input type="text" size="4" id="y" name="y" /></label>
<label> <input type="text" size="4" id="x2" name="x2" /></label>
<label> <input type="text" size="4" id="y2" name="y2" /></label>
<label> <input type="text" size="4" id="w" name="w" /></label>
<label> <input type="text" size="4" id="h" name="h" /></label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="readURL(this)">
<input type="submit" value="Upload Image" name="submit">
</form>
<script>
function readURL(input) {
if(document.getElementById("fileToUpload").value != "") {
if ($('#img1').data('Jcrop')) {
$('#img1').data('Jcrop').destroy();
}
}
if (input.files && …推荐指数
解决办法
查看次数
DotNetNuke中的JQuery + JCrop问题
我正在使用dnn 6.它有文件dotnetnuke/js/dnn.jquery.js所以我创建了一个模块并添加了对这个jquery文件和所有其他JCrop文件的引用,它不起作用.
所以我添加了官方JQuery.js,但后来dnn找不到一些方法.
有没有人使用过JCrop和DotNetNuke？
推荐指数
解决办法
查看次数
改变JCrop的aspectRatio的方法是什么？
如何动态更改JCrop的aspectRatio？
很抱歉这个简单的问题,但所有的手册,文档和讨论都在http://deepliquid.com上,这是从昨天开始的,我真的需要在今晚完成一些事情.
如果有人有机会保存JCrop手册,请上传吗？
推荐指数
解决办法
查看次数
Jcrop Handle Destroy
我正在允许多个图像上传,因此我需要销毁jcrop上的句柄,以便在图像窗格中显示新图像.我正在使用以下代码.
我只需要一种方法让句柄从当前的图像绑定中释放出来,并通过这段代码释放出来运行另一个图像.
$scope.cropImage = function(file) {
$scope.currentFile = file;
$("#target").attr("src", file.url);
$("#imageModal").modal("show");
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
$timeout(function () {
if(jcropHandle != null) {
jcropHandle.destroy();
}
jcropHandle = $('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0]; …推荐指数
解决办法
查看次数
如何在JS/jQuery上使用透明背景裁剪JPG和PNG
我正在使用一个名为"jcrop"的插件,它非常好,你可以在这里看到它:
http://howhack.com/crop/demos/crop2.php
问题是这个插件不支持具有透明背景的png.
javascript/jQuery中是否有类似的脚本/插件支持具有透明背景的png？
我需要这个矩形比例为16:9且最终图像总是640x360,这就是为什么我要尝试使用这个"jcrop".
推荐指数
解决办法
查看次数
$(document).ready()似乎无法正常使用用户控件
我已经创建了一个用户控件,并在$(document).ready()方法中放置了一些代码,但是当我放置断点时,通过boxWidth值,并逐步执行,我可以看到html尚未加载,这就是为什么我得到未定义的值.我需要首先加载html,这样我才能获得img元素的宽度和高度来计算方面的比例等.
屏幕截图如下:
推荐指数
解决办法
查看次数
使用画布裁剪并显示结果
我正在尝试与jCrop和一起工作canvas。
我尝试使用画布直接将其裁剪，而不是将图像发送到服务器并通过裁剪的图像再次返回，因为这样做的结果是，我将裁剪的base64图像转换为图像并发送到服务器。
我drawImage从画布上使用的结果。
但是问题是：
我将图像设置为400x400，但是原始图像要大得多，并且我认为画布直接从原始图像获取尺寸，而不是我确定的尺寸，因此结果与裁剪完全不同。
我做了一个确切的问题的例子。
只需裁剪图像，然后单击“剪裁”即可。
我缺少什么？
编辑：我更改为一个320x320的图像，看起来像裁剪效果很好，但与其他不是正方形的图像，没有任何效果。
推荐指数
解决办法
查看次数
设置上JCrop的最小高度和宽度
我正在开发一组电子邮件模板,允许用户添加文本,图像,更改字体和颜色等.现在,如果用户想要在模板的特定区域添加图像,他们将首先点击他们所在的区域想要添加图像,然后在我的应用程序中添加库中的图像.现在让我们考虑一下他们在模板上点击的区域的可接受尺寸是500*500,从库中选择的图像是1000*1000,在这种情况下,应用程序将自动调出一个裁剪工具,使用它可以调整大小图片.但是,我想将裁剪工具限制为仅可拖动到模板中所需位置的最小高度或宽度,即,在此示例中,它们不能再将裁剪工具拖动到高度或宽度以下的任何位置. 500,虽然他们可以保持一个或两个尺寸高于500,因为裁剪工具自动将其调整回500*500(例如800*500,甚至500*1000也是可接受的,因为裁剪工具自动调整图像大小以适应在模板中).我有一个看文档和这个问题,但不能真正找到一个合适的回答我的问题.下面是我的一些代码验证如果图像需要进行剪裁:
var SelectedAreaHeight; //returns the height of the area they clicked on the template
var SelectedAreaWidth; //returns the width similarly
function ImageClick(data)
{
var ReturnImageHeight; //returns the height of the area they clicked on
var ReturnImageWidth; //returns the width similarly
$(".ResizeImage").each(function()
{
ReturnImageHeight = $(this).data("height");
ReturnImageWidth = $(this).data("width");
}
});
if (ReturnImageHeight > SelectedAreaHeight || ReturnImageWidth > SelectedAreaWidth)
{
//this checks if the selected image's height OR width is greater
//than the desired area in …推荐指数
解决办法
查看次数