标签: jcrop
jCrop - 更新预览onload？
我正在使用jCrop预览演示来做我自己的事情.但是我遇到了一个问题.如果我在使用图像加载时创建默认选择,setSelect:那么我将选择映射到大图像上,但它不会出现在预览中.我无法找到一个api处理程序来在jCrop加载时调用updatePreview函数.有没有人知道如何在jCrop加载时调用此函数？
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy;
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
setSelect: [ 0, 0, selectWidth, selectHeight ],
aspectRatio: 1
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = 100 …4
推荐指数
推荐指数
2
解决办法
解决办法
8094
查看次数
查看次数
如何显示图片裁剪区域
我在本文的帮助下成功实现了图像裁剪解决方案Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET.它工作正常,但在页面加载时,我想显示默认的裁剪区域.就像下面的图片一样.我的意思是当打开包含用于裁剪的图片的页面时,它显示默认坐标,但是,用户可以编辑这些.
我想突出显示100x100坐标.
这是一个封闭的解决方案http://jsfiddle.net/kLbVM/3/在这个例子中,当我们点击按钮时它突出显示坐标,但是当加载页面时我需要相同的东西.
我正在寻找同样的事情,就像在linkedin.com中一样
编辑:这是我的页面来源...
<head runat="server">
<style>
#imgProfileImage
{
width: auto;
height: auto;
}
.jcrop-handle
{
background-color: #333;
border: 1px #eee solid;
font-size: 1px;
width: 7px;
height: 7px;
}
</style>
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.pack.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="imgProfileImage" runat="server" width="400px" height="400px" />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<br />
<asp:Button …4
推荐指数
推荐指数
1
解决办法
解决办法
2069
查看次数
查看次数
Jcrop插件无法使用resize功能
我的Jcrop插件无法正常工作.
我可以选择要裁剪的区域,但边缘没有小的调整大小.我不知道这是特定功能还是默认设置.
这就是我的意思.我的裁剪区现在看起来像这样:
我的裁剪背景为红色,所选区域具有原始颜色,但奇怪的是没有调整大小的方块,如下图所示:
我的代码看起来像这样:
头部:
<head>
<title>Het Vergeet-mij-nietje</title>
<script type="text/javascript" src="js/showfunctie.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="style/css/demos.css" type="text/css" />
<script language="Javascript">
jQuery(function($){
var jcrop_api;
$('#cropbox').Jcrop({
bgColor: 'red'
},function(){
jcrop_api = this;
});
$('#animbutton').click(function(e){
jcrop_api.animateTo([ 120,120,80,80 ]);
return false;
});
$('#delselect').click(function(e){
jcrop_api.release();
return false;
});
});
</script>
</head>
我的图片代码:
<div id="content1">
<?php
$target = "uploads/";
$target = $_POST["imagesource"];
$target = $target . basename( $_FILES['filename']['name']) ;
$ok=1;
if(move_uploaded_file($_FILES['filename']['tmp_name'], $target))
{
echo "De afbeelding *". basename( $_FILES['filename']['name']). "* is geupload naar …4
推荐指数
推荐指数
1
解决办法
解决办法
1111
查看次数
查看次数
CodeIgniter使用轴调整大小和裁剪
我在CodeIgniter的项目中有一个图像裁剪器,它像picresize.com一样裁剪图像(我正在使用jCrop).它适用于下面给出的香草代码:
<?php
$save_to = $this->config->item('images_gallery_thumb_folder').$data['photo_image'];
$targ_w = $this->config->item('gallery_thumb_width');
$targ_h = $this->config->item('gallery_thumb_height');
$src = $this->config->item('images_gallery_folder').$data['photo_image'];
$types = array(1 => 'gif', 'jpeg', 'png');
list($width,$height,$type) = getimagesize($src);
switch ($types[$type]) {
case 'jpeg':
$img_r = imagecreatefromjpeg($src);
break;
case 'gif':
$img_r = imagecreatefromgif($src);
break;
case 'png':
$img_r = imagecreatefrompng($src);
break;
default:
$img_r = imagecreatefromjpeg($src);
break;
}
$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']);
switch ($types[$type]) {
case 'jpeg':
imagejpeg($dst_r, $save_to, 90); //90 = jpeg quality
break;
case 'gif': …4
推荐指数
推荐指数
1
解决办法
解决办法
8368
查看次数
查看次数
Jcrop有大尺寸图像的问题
由Google翻译
我正在运行以在php和jquery中实现上传表单,并说现在一切都很好,除了一件我认为是无稽之谈但仍然无法解决的问题.让我解释一下:在实际操作中,当我运行图像上传时,我立即打印到屏幕上是一个临时预览,我将去那里剪切我喜欢的图像,然后保存缩略图.然而,这个预览,如果我插入jpg高分辨率我看到真人大小,所以页面太大了.代码如下:
的index.php
<?php
function uploadImageFile() { // Note: GD library is required for this function
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iWidth = $iHeight = 100; // desired image result dimensions
$iJpgQuality = 90;
if ($_FILES) {
// if no errors and size less than 250kb
if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 55555250 * 1024) {
if (is_uploaded_file($_FILES['image_file']['tmp_name'])) {
// new unique filename
$sTempFileName = 'cache/' . md5(time().rand());
// move uploaded file into cache folder
move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName);
// change file …4
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
角度不安全的网址
我正在使用此指令将jCrop与Angular一起使用:http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz？p = preview
当我加载一个值时src,我收到此错误:
无法插值:{{profileImg}}错误:[$ sce:insecurl]
然后它将我链接到一个页面,上面写着:
$ sceDelegate策略不允许阻止从url加载资源.
我的HTML是这样的:
<img-cropped src={{profileImg}} selected='selected(cords)'/>
当我更改$scope.profileImg为我的图像的网址时,会发生此错误.
我正在链接到S3,在那里我从中得到了价值profileImg.我相信这个来源,那么我怎么能告诉angular这个来源是否足以让这个指令有效？
如果我硬编码src为我的形象,我不会遇到这个问题.
编辑:
我试图用$ sce来信任这个网址.
我的控制器:
cmsApp.controller('PresentationCtrl',function($scope, $upload, all, $sce){
var socket = io.connect('https://xxxxxx.xxxxxxxxxxxxxx.xxx:3000');
$scope.profileImg="";
$scope.uploadProfilePic = function(){
socket.removeAllListeners();
console.log(file3);
var url = 'https://xxxxxxx.xxxxxxxxxx.xxx:3000/uploadProfile?tenant=xxxxx';
$scope.upload = $upload.upload({
url:url,
data:{myObj:'test1'},
file:file3
}).progress(function(evt){
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data,status,headers,config){
$sce.trustAsUrl(data);
$scope.profileImg = data;
});
};
});
即便如此trustAsUrl,它也会引发同样的错误.
可能是我试图从我的本地nginx服务器连接它？
EDIT2:
我把它移到S3托管,它工作.我想要链接到的图像也在S3上.我将它移动到EC2实例上的Apache Web服务器,但它不起作用.
我使用所有的答案,ng-src …
4
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Jcrop中的多张图片和prewiev.如何将许多id传递给javascript函数
我在我的应用程序中使用Jcrop插件(Jquery).我决定使用一些ajax解决方案但是将值传递给函数有问题.我不知道是否缺乏JavaScript技能或Jcrop问题.这是代码
jQuery(window).load(function(){
jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showPreview(coords)
{
if (parseInt(coords.w) > 0)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
jQuery('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
}); …3
推荐指数
推荐指数
1
解决办法
解决办法
5631
查看次数
查看次数
在不隐藏图像的情况下取消绑定 jCrop
我制作了一个图像编辑器，让您可以选择裁剪您正在使用的图像（使用 Jcrop）。
$('#canvas img').Jcrop({
bgColor: 'black',
bgOpacity: .4
}, function () {
jcrop_api = this;
});
出于这个原因，我需要随意绑定和解除绑定 Jcrop，但是我注意到当我调用
jcrop_api.destroy()
它也隐藏了 Jcrop 绑定的图像。我是否以正确的方式使用它？有没有解决的办法？
3
推荐指数
推荐指数
1
解决办法
解决办法
3127
查看次数
查看次数
使用Jcrop裁剪上传的图像
我正在尝试使用Jcrop裁剪上传的图像.我的目的是在用户上传时裁剪图像.我不需要将用户上传的图像存储在服务器中.但是,我应该只存储通过Jcrop选择的图像用户部分到服务器.这是问题的小提琴链接
我使用了以下代码:
HTML:
<form id="form1">
<input type='file' id="imgInp" />
<img id="blah" class="crop" src="#" alt="your image" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>
CSS:
<style>
#blah {
background-color: #FFF;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</style>
JS:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
} …3
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
在 JCrop 中设置最大高度和最大宽度
我想在这个尺寸（900 * 300）中裁剪图像..我使用 JCrop 这是我的代码：
<img src="1434467640.png" id="target" alt="" />
<input type="text" id="x" name="x">
<input type="text" id="y" name="y">
<input type="text" id="w" name="w">
<input type="text" id="h" name="h">
JS：
$(window).load(function() {
var jcrop_api;
var i, ac;
initJcrop();
function initJcrop() {
jcrop_api = $.Jcrop('#target', {
onSelect: storeCoords,
onChange: storeCoords
});
jcrop_api.setOptions({ aspectRatio: 3 });
jcrop_api.setOptions({
allowResize: false ,
minSize: [900, 300],
maxSize: [900, 300]
});
jcrop_api.setSelect([0, 0, 900, 300]);
};
function storeCoords(c) {
jQuery('#x').val(c.x);
jQuery('#y').val(c.y);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
});
我想限制大图像的最大宽度和最大高度！有一些参数吗？
3
推荐指数
推荐指数
1
解决办法
解决办法
3777
查看次数
查看次数