I want to write an app based on JavaScript that enables users to drag&drop images on a site into a <canvas>. There is a code example here and it's working quite well - with a mouse. The same effect doesn't work when I use a stylus or digital pen as an input device. Adding "-webkit-user-drag" property or "draggable" attribute to the image didn't help.
How can I achieve this (I'm using either Chrome or Edge)?
Related
I want to implement the following effect, I thought I would be able do it by using css, like: background-attachment, or some scroll, but without any luck. Should I have to do it via drop events? Thanks.
We have an Ionic app that accesses $cordovaCamera like so:
$cordovaCamera.getPicture({ allowEdit: true });
There are more options passed in, etc., but the above is just showing that we're passing in the allowEdit flag. If anyone is unfamiliar, here's what the docs say:
allowEdit: Allow simple editing of image before selection. (Boolean)
This works perfectly. After I select a picture from the gallery or take a picture, it then goes to its native "edit" view, where the user can crop the image.
Here's the flow:
Take Photo > Edit (crop) > Upload to the interwebs
Select Photo > Edit (crop) > Upload to the interwebs
On Android, you can resize the crop field and move the crop field around.
On iOS, you can't move the crop field (unless you zoom in first), and you can't resize the crop field at all.
Is this just an iOS quirk we have to live with, or is there some way to get around this? This is happening in iOS 8.3.
Screenshots coming soon
Edit
Here's the video demonstrating the problem.
At 0:16 you'll see that it's impossible to move the crop box. (This is happening on an iPod Touch with iOS 8.2, but it is also happening on several iPhone 6 devices with both iOS 8.2 and 8.3). However, this does not occur on Android. Thus, it seems reasonable to believe this is native iOS issue rather than an Ionic/Cordova issue (or, it may be an issue with the way Ionic interacts with iOS).
At 0:22 you'll that once the user zooms in, then the user can actually move the crop box.
Another update (this is important)
Only when taking a photo does this bug occur. When you select an existing photo from your library, the crop tool works as expected...
iOS has a built in cropping tool if you enable allowsEditing on your UIImagePickerController
UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
[imagePicker setAllowsEditing:YES];
If you want a different cropping tool you are going to have to make your own or use an open source project.
Here are some projects:
https://github.com/dzenbot/DZNPhotoPickerController
https://github.com/ruslanskorb/RSKImageCropper
https://github.com/kishikawakatsumi/PEPhotoCropEditor
In our company hybrid mobile app we use ng-image crop. https://github.com/jodonnell-broadsoft/JsImageCrop
It allows users to take photos of images in android and ios using the camera plugin and then lets them crop the image (we use it for documents). We then upload the image to our server.
Here is what our final version looks like. Also it is super smooth and easy to use.
Once you include the ng-image crop, then inject the dependencies this is all the code you use
<div class="cropArea" ng-style="cropHeight">
<img-Crop image="image.uncropped" result-image="image.cropped" result-image-format="image/png" area-type="rectangle" on-change="console.log($scope.image.cropped)">
</img-Crop>
</div>
I am using the basic jQuery UI Slider for an audio player. I am using basic CSS to style the handle of the UI Slider and I have noticed that in Firefox, and ONLY in Firefox, there are some chunks of the graphic that I am using for the handle's background have been digitally removed. These glitches appear and disappear during the course of the playback as the handle moves along the slider, but like I said, this ONLY occurs in Firefox.
I have changed out the graphic from PNG to JPG, but I get the same results.
Has anyone else had this same issue?
Example of Glitch
What the handle SHOULD look like
Anyone knows if there is a way without the use of webfonts to embed font into an Adobe Edge Animate composition so that the fonts can be seen when I create a Phonegap iOS app with the html file i get from Edge Animate?
All i can find so far is custom fonts for Edge Animate that uses webfonts which means I can only add links rather then embedded directly into the file or custom fonts for Phonegap where using font-family in css but that doesn't seems to be read by Edge.
I was thinking there is some way in the edge.js file that is output where they use
var fonts = {};
fonts['londrina-shadow, sans-serif']='<script src=\"http://use.edgefonts.net/londrina-shadow:n4:all.js\"></script>';
fonts['cabin-sketch, sans-serif']='<script src=\"http://use.edgefonts.net/cabin-sketch:n4,n7:all.js\"></script>';
fonts['coming-soon, sans-serif']='<script src=\"http://use.edgefonts.net/coming-soon:n4:all.js\"></script>';
to embed webfonts. Can I do something to it to embed the fonts with a path like src:"fonts/coming-soon.ttf"
Hope there is an answer to this or is there simply no way to do this cos Adobe decide to only link webfonts and screw us up.
Does the css work if you add that class to the div you are animating. If you save out the edge project, the open it in dreamweaver you can attach a css stylesheet. When you go back to edge and add that style it should show up in the animation. I know this works if you want to add png's to an animation. Not sure if it will work but could. I will look into it now and see if I can figure it out.
my goal is to build a short HTML/CSS3/JavaScript animation that will be plugged into an iPad web app. What I'm essentially after is a canvas (image) that will have several regions the user can tap to zoom to and get additional info in a popup (overlay box) for each.
I can code HTML/CSS prety well but my JavaScript skills a a bit behind.
I was wondering if there is any sort of software/toolkit that I can use to achieve what I'm after. I did look into Sencha Animator (the interractivity I'm after seems to be missing), PhoneGap and jQTouch dont have the animation capabilities (except for few sliding/fading transitions).
Any suggestions?
Indeed! Adobe released one in DW CS5. I've personally never tried it but here is the link to the announcement:
http://blogs.adobe.com/designandweb/2010/05/moving_the_web_forward.html