I'm running code that looks for an event trigger based off of drawing on the html5 canvas. Once you stop drawing it sends the dataURL to a input field. From there I save the dataURL to a database.
This works for the following:
Andriod Pads that are running version "icecream sandwhich"
Ipad
PC
MAC
It does not work on the following tablets:
Kindle Fire
Android Pad running "honeycomb"
here is my code to put the dataURL into the input:
document.getElementById("dataURLCode").value = canvas.toDataURL();
on the ones that works, the output in the field is something along the lines of:
data:image/png;base64,iVBORw0K...
for the ones that do not work the output code is just this:
data:,
Things I've tried to clear the cache and history. I'm trying to stray away from using a different browser other than the default one due to we are making this product for cross platform and we need to have it working for all tablets and their default browsers.
I've also pulled a dataURL into the input field no problem by copy/paste, it just cant pull using the canvas.dataURL
I'm assuming the browsers do not support this part of html5 but I'm up for other assumptions.
Thanks for the help.
Some version of Android have problems with toDataUrl(); Here you can find an easy solution:
http://code.google.com/p/todataurl-png-js/wiki/FirstSteps
The script: http://todataurl-png-js.googlecode.com/svn/trunk/todataurl.js
Paste this in your head:
<script src="todataurl.js"></script>
Related
Most tutorials on javascript drag and drop explain how to handle file drops into the browser and how to drag data out of the browser. But I have seen almost nothing about draging a file out of the browser.
For example, you start a drag on a div element, drop it on the desktop and a file appears there.
What I have found is this: (from this example)
e.dataTransfer.setData('DownloadURL', `image/png:Luigi.png:${e.target.href}`);
However, as far as I can see, setting using DownloadURL this causes errors in chrome, a crash report in edge and doesn't do anything in firefox.
Is there a standard way to download a file through drag and drop, preferably from a url?
Ok, the problem in the example seems to be that Chrome now requires same origin on the DownloadURL.
At least that's what the Firefox developers believe that have had an issue to replicate this feature for 11 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=570164
Safari doesn't seem to support it either
I've used the following code in an embedded code field on Google Sites to display images on my website, it's all going well on my Windows, Linux and Android devices, but they don't show up on the iPhone (whether using Chrome or Safari)!
some context/constraints:
I'm pulling my images from my Google Drive. They are ~80kb JPEGs.
I'm using a HTML form as I have other elements (buttons, fields) which I've removed from the code extract below to focus on the issue. I need to keep this form.
Have you encountered this issue before?
<form name="submit-to-google-sheet">
<img id="img1" width=163 height=227>
</form>
<script>
const img1 = document.getElementById('img1');
img1.src = "https://docs.google.com/uc?export=view&id={imageGoogleDriveID}";
</script>
PS: I've explore the Base64 format which does allow to display the images on iOS-operated devices. It works if I just set the image source to a Base64 string. But I can't call a Base64 file from Drive as conveniently as a JPEG. I'm manipulating 250+ images so I can't either have the base64 strings in the middle of the code, it'd be too large to work with. I've tried to encode the images with base64_encode functions following this example but didn't manage to display anything. I've drilled so much that I'm actually wondering if it's the right way to go at all!
We just found the fix for iOS: when third-party cookies and cross-site tracking are blocked, the images don't load. The settings to toggle are explained here.
Base64 wasn't the solution, since the issue was coming from pulling images from my Google Drive, i.e. a different domain from my website.
I am replacing a div in PhoneGap android application.
Both below codes work in browser, but code 01 not working in the device.
Code 01 (Not Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('<img class="img-responsive" src="images//2000.jpg">');
Code 02 (The Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('Hello World');
Why Code 01 not working in the device? How I solve it?
Additional question :If I getting this type of question (working on browser, but not working on the device) how should I debug it on the device to know whats going on?
Update
Carsten Løvbo Andersen suggested to add the ALT tag to image. So I add the ALT images. Now in device it display the value of ALT tag instead of the image. But in browser it display the image.
To debug on a device get yourself an android device, personally I use a HTC M8, this allows you to USB into your PC and by using the chrome browser and using the URL chrome://Inspect you can view the html and scripts of the application, like you are using debug tools on chrome.
*EDIT
I am not 100% clear on the issue you are facing but remember the routing on a device can sometimes differ, make sure that your image path is correct.
For example to get my images working on my latest application i needed to use
<img src"~/Content/images/image1.png">
Try adding the ~/ followed by the directory.
This project has a lot of junk JS that we've inherited from the previous devs.
We've recently had images stop appearing on http://www.thegospelcoalition.org on tablet and mobile.
As you can see, images are fine in desktop. Pull it up on a device or in Chrome dev tools emulator and you can see the issue.
We're working fine in development, images appear as expected.
We've cleared CloudFlare cache but still no joy.
It's problematic to troubleshoot because locally, the team is fine.
Any pointers?
In js/aggregate-ck.js, you have this function that gets the img src and sets it as a background-image:
_transferImages = function(selector){
var $selector=$(selector);
$selector=$selector.not($_transferredImages);
$selector.each(function(){
var $this=$(this),
$img=$this.children("img"),
$img1;
if($img.length){
$img1=$img.eq(0);
$this.css({"background-image":"url('"+ $img1.attr("src")+"')"});
$img1.remove();
}
});
$_transferredImages=$_transferredImages.add($selector);
return $selector;
};
When I use a desktop user agent, it works fine because the images have an src attribute. Unfortunately, with a mobile user agent, these images do not have an src, but a data-cfsrc attribute.
To correct this function, replace
$img1.attr("src")
with
($img1.attr("src") || $img1.attr("data-cfsrc"))
and you're good to go!
The only thing I can see that becomes problematic is there's a call to an image that should be loaded at a certain screen size. You can see that the value returned by whatever performs the comparison is obviously returning incorrectly:
background-image: url(http://www.thegospelcoalition.org/undefined);
Fix that and you should be good. (Not respecting other erroneous errors)
I am getting on one of android phones error from jwplayer:
Error playing media:
MediaError {
code 4
}
Tried to search what does it mean, but cannot find.
Video works on other android devices, and on desktop computers. Tried chrome and default browser in android.
Update
http://jsfiddle.net/HCH8Q/3/
jwplayer('myElement').setup({
file: 'http://video.oitlabs.com/dogs6_2mb/mr6d_1047.mp4',
// works
// file: 'http://videos-jp.jwpsrv.com/zWLy8Jer/videos/i8oQD9zd-1753142.mp4?77c801d752d5207784c49e7ed80fb953798fae0fcca03ecf79558597ab74bd0b969af6ee1babdc6fac893174bba3c1bbb98ef7c2e4c6b3c59a812b4ed2c9abb29c61117869dbacbbb7caced845a8994ff297cc03a4',
height: 360,
image: '/uploads/example.jpg',
width: 640
});
So video from their site works, but my video does not. But when I run that video not in jw player but directly in the address bar its url, it plays. So it means browser is able to play that video.
This happens btw on LG L7 P710 phone
Update:
Tried now to upload to my server the video from jw site, and it works on that phone.
http://jsfiddle.net/HCH8Q/5/
So this is encoding issue. Then the question comes - how should I solve it? I used Handbrake program to convert videos, it has many of settings but I am not sure what should I set to convert so it would work on every phone which supports mp4 files?
Update:
Finally made it work by this site instructions:
http://www.broken-links.com/2010/07/30/encoding-video-for-android/
The first is cross-platform, using Handbrake. What I did with this was to use the iPhone & iPod Touch preset, check the Web Optimized option, and change the Average bitrate option (in the Quality section) to ~1000kbps (you should then save this as a new preset called Android).
You’ll also need to change the size of the output video in the Picture Settings options — I changed mine to 480 wide (keeping the aspect ratio) and they came out really crisp and sharp. You can see the result of that below (if your browser supports it).
It looks like everything I done same earlier, except that I used much smaller kbps setting and picture size left default. Will later try to experiment which caused to make it work, because still it does not make sense for me how different bitrate or picture size can make it not work. It should be just affecting quality.
Update
Had another problem - when using handbrake and trying to convert many files at once, first file picture width gets converted to what I set, but other files - to the default, maybe some bug or something.
But then I tried another program - Freemake Video converter - it has various params and I tried convert 2 files at once, and were no problems, worked on that phone also.
http://www.freemake.com/free_video_converter/
MediaError { code 4 } is not a JW Player error.
I would recommend taking the video from our site, uploading it to your hosting, and then seeing if it still works. That way you can determine if the issue is encoding based, or a server side issue.