标签: jcrop
JQuery JCrop - 如何设置固定大小的选择区域？
我想弄清楚如何修复JCrop下的选择框大小.该文档提到了如何设置初始选择区域,但没有提到如何设置固定大小.有谁知道我怎么能修好它.提前致谢.
推荐指数
解决办法
查看次数
如何删除jcrop？
我如何解读图像？
我正在添加jcrop;
$('#imgThumbnailer').Jcrop({
onChange: statusCrop,
onSelect: statusCrop,
bgColor: 'black',
bgOpacity: .3
});
如何解除它呢？
编辑:
$('#imgThumbnailer').attr("src", $obj.attr('thumbnailer_link'));
var dlg = $("#ThumbnailDialog").dialog({
modal: false,
draggable: false,
position: 'center',
zIndex: 99999, // Above the overlay
closeText: '',
width: 510,
height: 500,
open: function () {
$('body').css("overflow", "hidden");
if ($.browser.msie) {
$('html').css("overflow", "hidden");
}
$("#loader").show();
var ratio = parseFloat($obj.attr('thumbnailer_ratio'));
jcrop_api = $.Jcrop('#imgThumbnailer', {
onChange: statusCrop,
onSelect: statusCrop,
bgColor: 'black',
bgOpacity: .3,
aspectRatio: ratio
});
},
close: function () { $('body').css("overflow", "auto"); if ($.browser.msie) { …推荐指数
解决办法
查看次数
jCrop(jQuery)有时无法加载图像/裁剪区域
我有一个非常简单的问题,但我对导致问题的原因一无所知.在我的一个应用程序中,我使用jCrop作为裁剪图像以适应横幅/标题等的小插件.这些步骤将采取:
1) Select an image (using CKFinder for this, CKFinder returns the image path to an input field)
2) Click a button to load the image
3) Crop the image
4) Save the image
在大约75%的情况下,一切都按计划进行,但是在另外25%的情况下,jCrop无法加载裁剪区域并将其留空.这是我正在使用的jQuery代码:
jQuery('#selectimg').live('click', function(e) {
e.preventDefault();
var newsrc = jQuery('#img2').val();
jQuery('#cropbox').attr('src', newsrc);
var jcrop_api = jQuery.Jcrop('#cropbox', {
boxWidth: 700,
boxHeight: 700,
onSelect: updateCoords,
onChange: updateCoords
});
//Some other JS code come's here for buttons (they work all the time)
});
我注意到当我把部分放在可裁剪区域中转换#cropbox的部分时,图像加载得很好,所以错误在于var = jcrop_api部件,但我慢慢开始认为没有解决方案. ..
这是我到目前为止所尝试的: …
推荐指数
解决办法
查看次数
在响应式图像上使用jcrop
由于jcrop现在正在使用触摸屏,我想做一个使用它的网络应用程序.我有一切工作,但如果我尝试使设计响应,以便用户可以在裁剪之前看到整个图像(它的宽度是屏幕的百分比),那么裁剪区域将不会与选择的相同用户.在调整大小后的图像上进行的选择坐标与全尺寸图像上的坐标不匹配.
Jcrop通过使用box大小调整或truesize方法包含类似问题的解决方案(当处理大图像时),但如果图像的宽度基于百分比而不是给定的像素宽度,则它们都不起作用.
我能想到的唯一解决方案是使用媒体查询调整图像大小,并根据屏幕的宽度制作3或4个版本,但我宁愿坚持基于百分比的调整大小,因为它看起来好多了.
这是我的jcrop电话:
var jcrop_api, boundx, boundy;
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 0.75
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
trueSize: [900,600],
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c){
if (parseInt(c.w) > 0){
var rx = <?echo $width;?> / c.w;
var ry = <?echo $height;?> / c.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * …推荐指数
解决办法
查看次数
如何在使用Jcrop进行裁剪时获得可变宽度和高度,并使用PHP GD保存
我有一个应用程序,必须裁剪宽度和高度可变的图像.但我不知道如何使用php gd(Createimagefromjpeg)函数执行此操作
在我的代码我有:
$targ_w = 400;
$targ_h = 400;
这意味着裁剪后的图像将始终获得此宽度和高度.那不是我想要的.我希望,以某种方式裁剪图像并裁剪它,就像我在裁剪区域选择它一样,如下图所示:
现在,当我裁剪图像时,就像在图片中我得到的那样:
这是一个方形图像,因为我必须给出宽度和高度.但在我裁剪的每一张图片中,尺寸都不同.
有没有办法(变量,id等..)这样做？
感谢:D
编辑:我的代码来创建裁剪图像:
<!DOCTYPE>
<html>
<head>
<title>Cropped Image</title>
</head>
<body>
<?php
SESSION_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = 400;
$targ_h = 400;
$jpeg_quality = 100;
$src = $_SESSION['target_path'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r, 'data/uploads/' . basename($src));
header('Location:'.$src);
exit;
}
?>
</body>
</html>
我上传图片的代码:
<!DOCTYPE>
<html>
<head>
<title>Het Vergeet-mij-nietje</title>
<link href="style/default.css" REL="stylesheet" TYPE="text/css">
<script type="text/javascript" src="js/showfunctie.js"></script>
<script src="js/jquery.min.js"></script>
<script …推荐指数
解决办法
查看次数
有没有办法使用JCrop裁剪比实际图像更大的区域？
据我所知,JCrop不会让我进行设置,因此用户可以在实际图像之外裁剪并包含周围的空白.有没有办法做到这一点？
为了帮助解释我的意思,我们说我们将我们的作物限制在16:9的比例.这适用于具有自然宽广主题的图像:
但有时用户想要使用的源图像并不能轻松适应所需的比例:
相反,我们希望通过使裁剪区域大于图像本身来允许它们在图像外部包含空间:
我一直在搞乱JCrop并查看手册和Google一段时间,看起来这不可能(不修改JCrop).我错了吗？如果是这样,你怎么做？
FWIW,在这种情况下的实际图像将是产品/组织徽标图像,其具有各种各样的宽高比,并且几乎总是人们可用的图像在文本/图像周围几乎没有空白.这意味着限制在图像边界的任何固定宽高比裁剪几乎肯定会切断图像的顶部+底部或左侧+右侧.
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
我应该如何使用jcrop在客户端裁剪图像并上传它？
我想要做的是使用html fileupload控件选择图像,使用jcrop裁剪选择,在客户端裁剪图像并上传图像.这里是小提琴链接https://jsfiddle.net/govi20/spmc7ymp/
Id用于代码: jcrop图像的
目标
图片 fileupload控件
预览画布预览
clear_selection按钮清除所选区域
设置jcrop.
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.Jcrop.js"></script>
<script src="./js/jquery.color.js"></script>
清除选择.
<script type="text/javascript">
jQuery(function($){
var api;
$('#target').Jcrop({
// start off with jcrop-light class
bgOpacity: 0.5,
keySupport: false,
bgColor: 'black',
minSize:[240,320],
maxSize:[480,640],
onChange : updatePreview,
onSelect : updatePreview,
height:160,
width:120,
addClass: 'jcrop-normal'
},function(){
api = this;
api.setSelect([0,0,240,320]);
api.setOptions({ bgFade: true });
api.ui.selection.addClass('jcrop-selection');
});
});
在jcrop中显示上传的文件
jQuery('#clear_selection').click(function(){
$('#target').Jcrop({
setSelect: [0,0,0,0],
});
});
裁剪图像并将其分配给画布(从stackoverflow上的一个线程获取此图像)
function readURL(input) {
if (input.files && input.files[0]) {
var reader …推荐指数
解决办法
查看次数
随后的HTML5 CreateObjectURL blob图像预览和裁剪加载错误
我试图找出我的代码是否有问题或当前的HTML5 File API实现.
以下代码有效.在加载图像一次后重复该过程时会出现错误.
第二次选择文件时,图像blob加载,然后闪烁,图像消失.之后的后续选择通常可以正常工作(如果文件很大,有时会出现不稳定的行为).重复相同文件选择的过程通常有效(作为修复).
任何帮助将不胜感激.
使用的JavaScript库
JQuery 1.7.1
JQuery Tools 1.2.6
JCrop 0.9.9
步骤 - 摘要
用户通过传统
<input type="file" />对话框选择文件.onchange处理程序为输入执行并检查是否选择了文件,如果是,则验证MIME类型是image/jpeg还是image/png,以及所选文件大小是否小于250KB.如果此验证失败,则重置选择.
此时,要上载的文件(图像)有效.接下来,它检查浏览器是否支持File API CreateObjectURL via
if (typeof window.URL == 'undefined') return;(如果没有,则跳过后续步骤)它将图像blob加载到当前图片预览中(一个用于显示当前图像),也加载到动态生成的图像元素中,该图像元素通过jcrop裁剪功能添加到jquery工具的叠加层中.
然后,用户通过jcrop裁剪图像并关闭叠加层,查看要上载的图像的裁剪预览(仅当浏览器支持CreateObjectURL且用户裁剪图像时)
代码
HTML
<div style="height: 100px; overflow: hidden; width: 100px; margin-bottom: 5px;">
<img id="PhotoPreview" alt="Photo" src="/Content/no-photo.png" />
</div>
<input type="file" id="Photo" name="Photo" onchange="photoChanged(this.files)" />
<input type="hidden" id="PhotoCrop" name="PhotoCrop" value="" />
JavaScript window.URL = window.URL || window.webkitURL;
function photoChanged(files) {
if (!files.length) return;
var …推荐指数
解决办法
查看次数
使用AngularJS进行图像裁剪
我想让用户裁剪图像,我找到了这个JQuery插件 - http://deepliquid.com/content/Jcrop.html
我尝试将它与Angular-ui的Jquery passthrough选项一起使用,将ui-jq=Jcrop指令添加到<img>
问题是如果我使用ng-src动态更改图像它不起作用,看不到任何东西.如果我将其更改为src并放置一个静态URL我可以看到图像和Jcrop.
我该如何解决这个问题？另外,我怎样才能听Jcrop的回调知道用户的选择是什么？
是否有更好/更简单的方法将图像裁剪功能添加到AngularJS？
推荐指数
解决办法
查看次数
标签 统计
jcrop ×10
jquery ×7
javascript ×3
crop ×2
css ×2
image ×2
angular-ui ×1
angularjs ×1
gd ×1
handle ×1
html ×1
html5 ×1
jquery-tools ×1
php ×1