jcrop

How to close fancybox after Ajax Submit?

由 白昼怎懂夜的黑 提交于 2019-12-08 13:37:33
I am using Jquery form plugin. Popup is displayed with image uploading form. Image is uploaded successfully. I want to close the popup after successful upload of image. The below javascript is written in popup content. $(this).ajaxSubmit({ success: function(dd) { parent.$.fancybox.close(); } }); But it is not working. Jquery library, fancybox library included in the popup content and in parent page. Additionally i want to reload the fancybox again with "dd (ajax return value)" content loaded with it. It will have Jcrop function. Right now, Jcrop is not working once the ajaxSubmit used to

Crop and show result with canvas

由 泄露秘密 提交于 2019-12-08 13:20:31
问题 I'm trying to work with jCrop and canvas . Instead of sending the image to the server and back again with a cropped image, I'm trying to crop it directly, using canvas, because with the result, I transform the crop in a base64 image and send to the server. The result I get using drawImage from canvas. But the problem is: I set the image to 400x400, but the original image is much bigger then that and I think the canvas is getting the size directly from the original image, and not the one that

image onload event triggering before its image fully loaded?

由 廉价感情. 提交于 2019-12-08 12:52:29
问题 I am using Jcrop jquery plugin, and triggering the initJcropBox() function on onload event. but this function is being triggered before the image is fully loaded. which is causing problem. such as showing incorrect size of jcropbox or not showing jcropbox at all. when i place a line, it works fine. but is not a solution. setTimeout('initJcropBox()',2000); How can I trigger initJcropbox() function after image is fully loaded/rendered in the browser? var api; function initJcropBox(){ api = $

How to close fancybox after Ajax Submit?

由 ☆樱花仙子☆ 提交于 2019-12-08 07:12:39
问题 I am using Jquery form plugin. Popup is displayed with image uploading form. Image is uploaded successfully. I want to close the popup after successful upload of image. The below javascript is written in popup content. $(this).ajaxSubmit({ success: function(dd) { parent.$.fancybox.close(); } }); But it is not working. Jquery library, fancybox library included in the popup content and in parent page. Additionally i want to reload the fancybox again with "dd (ajax return value)" content loaded

JCrop resizing the image not cropping - Javascript

由 帅比萌擦擦* 提交于 2019-12-07 18:38:20
问题 I am trying to use JCrop to crop an image. However the results are frustratingly wrong and I am not sure why. I have an image uploader that when someone selects in image a javascript changes the source of an image already on the page to match the newly upload image. I then have this code: $('#myForm').ajaxForm({ dataType: 'json', success: function (result) { $("#image-editor-preview img") .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random()) .Jcrop({ aspectRatio: 1,

Disable mouse click outside cropped region

由 让人想犯罪 __ 提交于 2019-12-07 17:33:35
问题 I'm trying to use jquery jcrop to crop images. this code starts the plugin adding some selected area to the image with aspcet ratio. $('#cropbox').Jcrop( { setSelect: [ 100, 100, 50, 50 ], aspectRatio: 16 / 9 }); But if user clicks mouse on image somewhere else, the selection disappears. So what I want is to disable mouse clicks in this plugin so selected area will remain over the image. 回答1: SOLUTION I've received email on my request to the creators of jcrop and that solved the problem Here

Using jCrop with cloudinary through rails 4 to crop before creating image

由 做~自己de王妃 提交于 2019-12-07 14:02:58
问题 I've been at this for some time now. I"m using cloudinary to upload photos and am trying to implement a cropping feature using jcrop on a photo create action. After I implemented cloudinary I followed railscasts #182 on Jcrop. I think I'm having problems getting the new cropped parameters (x,y,w,h) back to the uploader before the image is saved. Update: I'm not even getting the values put into the f.text_fields. When I move the cropper around, there should be new values right? Here's a pic of

jCrop - update preview onload?

由 一个人想着一个人 提交于 2019-12-07 09:11:49
问题 I am using the jCrop preview demo to do my own thing. However I have run into a problem. If I create a default selection when the image loads using setSelect: then I have the selection mapped out on the big image but it doesn't appear on the preview. I cannot find an api handler to call the updatePreview function when jCrop loads. Does anyone know how to call this function when jCrop loads? jQuery(function($){ // Create variables (in this scope) to hold the API and image size var jcrop_api,

Jcrop 整合 FileAPI 图像裁剪上传

由 我只是一个虾纸丫 提交于 2019-12-07 03:23:27
Jcrop是一款优秀的jQuery插件，可以非常方便地实现图像裁剪，而且功能十分的强大。 一般的情况下，图像裁剪的实现要经过两次图像上传，第一次将图片上传到后台，后台返回一个链接，通过这个链接在本地实现预览。第二次将图片本身以及裁剪参数上传到后台，后台进行裁剪，并保存在服务器。也就是说第一次的上传是不必要的，用户万一中途取消了操作，那第一次的操作就完全成了无用操作。而且增加了网络的消耗，造成了不必要的浪费。一般这种情况下，我们会考虑第二次不进行上传而使用第一次上传的图片，但这增加了技术难度，而且造成了更多的Exceptions的可能。事实 上有更好的选择，那就是FileAPI，它不进行上传，图片的预览是通过将图片加载到本地浏览器缓存实现的。我们通过FileAPI获取必要的参数，在用户“下定决心”使用该图的时候再进行上传，可以极大的降低多余消耗，增强用户体验。 要实现图像裁剪上传，首先要实现图像本地预览的功能。定义一个priviewImage.js文件，方便复用： function previewImage(file, callback) { /* * file：file控件 prvid: 图片预览容器 */ /*if (file[0].fileSize() > 3 * FileAPI.MB) { alert("The uploading file size must less

Using JCROP and JQUERY to crop images using from jsp..url based image source/ dynamic images not working

由 早过忘川 提交于 2019-12-06 12:43:09
i have the following code that works perfectly fine to display an image in a Jsp so that i can crop it. The code uses a static image "testpic.jpg" which works perfectly well without issues. When i attempt to use a dynamic image generated from a servlet, JCROP seems to fail to initialize so i get the images, but i will not have the cropping functionality enabled. i use <img src="displayImage?memberNumber=<%=memberNumber%>&memberSuffix=<%=memberSuffix%>&amp" id="cropbox" /> to display the dynamic images. The displayImage servlet is shown below. <html> <head> <script src="../js/jquery.min.js"><
订阅 jcrop