We are loading images in a popup, via an Ajax request, and they intermittently only partially render.
I've basically removed any weird Javascript/nonsense other than the core flow - just a basic HTML image, and it is still happening - only on iOS.
Once you 'rotate' the device, the image renders correctly - so, it's not a weird div floating above or anything (I can select the image in iOS debugger mode when attached to a Mac)
Any help would be most appreciated.
Setting decoding="sync" on the img tag didn't help in my case where a lot of images are loaded simultaneously. Loading the image manually before did the trick though.
const imageLoader = new Image();
imageLoader.src = url;
imageLoader.decoding = 'sync';
imageLoader.onload = () => {
// allow drawing image
};
For anyone who stumbles across this and is working in a react environment
const [didLoadMainImage, setDidLoadMainImage] = useState(false);
useMemo(() => {
setDidLoadMainImage(false);
const imageLoader = new Image();
imageLoader.src = url;
imageLoader.decoding = 'sync';
imageLoader.onload = () => {
setDidLoadMainImage(true);
};
}, [url]);
return (
<div>
{didLoadMainImage ? (
<img src={url} />
) : null}
</div>
);
It seems this is an issue within the iOS image decoder - some kind of race condition.
This has been fixed by forcing the decoder to operate on the main thread, using:
<img decoding="sync" src="#Url" />
Hopefully this helps someone else!
In my case, the solution was to decrease the size of the images I was displaying. Our images were about 10x the size of the HTML element they were displayed in.
Apple's developer document states:
Related
Ive got a fullscreen image slide with about 20 images each c. 250kb. That is quite allot to download and because i want each image to be seen in order Ive set the slider not to start until the first 4 images are downloaded. The only issue is that when run in a browser (chrome latest version) it seems to download all images at the same time meaning that the first 4 images finish loading about the same time as the other 20.
Is there a way i can tell the browser to download them in cronalogical order ie. if my html is like this :
<div id="slider">
<img src="one.jpg">
<img src="two.jpg">
<img src="three.jpg">
<img src="four.jpg">
<img src="five.jpg">
<img src="six.jpg">
...
</div>
Start on one.jpg wait until complete then start on two.jpeg etc ?
You can use the img onload property in javascript.
var firstImage = new Image();
firstImage.src = 'some url';
firstImage.onload = function(){
var secondImage = new Image();
secondImage.src = 'some url';
secondImage.onload = function(){
//etc
}
}
obviously doing those calls with a recursive function would be the actual implementation, but I wanted to make sure you saw the core concept.
Okay, so I need to change images on hover in my Angular app. However, due to some peculiarities of the site, it wasn't really feasible to change images on hover via css [without a ton of extra work], which would have been the best way, I realize.
So instead, I'm using ng-mouseenter and ng-mouseleave to change the images on hover.
landing.jade
img.share-button(src='images/btn_share.png', ng-click='dropdownShareIcons()')
img.share-icon-top(src='{{ shareIcons[0].orig }}', data-id='0', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[1].orig }}', data-id='1', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[2].orig }}', data-id='2', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
Then in the controller I have an object which contains the paths to the images, and the functions which switch images on hover.
landing.js
$scope.shareIcons = [
{orig: 'images/follow_weibo_grey.png', hover: 'images/follow_weibo_colored.png'},
{orig: 'images/follow_wechat_grey.png', hover: 'images/follow_wechat_colored.png'},
{orig: 'images/follow_youku_grey.png', hover: 'images/follow_youku_colored.png'},
]
$scope.colorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].hover;
}
$scope.decolorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].orig;
}
This all works fine and well on my local environment, but on the production server it is veeeerrrrry slow. Like, 2-3 seconds to switch the images.
So my question is - is there an easy way to fix this? Either something within angular or a workaround/hack. Doesnt really matter as long as image switch time is sped up a bit. Or is it going to continue to be slow as long as I'm switching images via JS like this? Ideally, I would like avoid rewriting this using CSS.
Thanks in advance.
Hey bro I had the same problem, and all I could think of doing was preloading the images. That helped alot. Add a small piece of js code which loads asynchronously at the beginning of your document. Like this for example:
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
// for (i = 0; i < $scope.members.length; i ++){
// return members[i].source + ",";
// }
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image1.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image2.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image3.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image4.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image5.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image6.1.jpg"
)
I would consider optimizing the PNG image sizes. There are batch optimization tools available online, here is a blog post comparing a few of them to get you started: http://www.sitepoint.com/image-compression-tools/ perhaps you can test optimize a couple of images to see if you notice a change?
GL!
I have 2 divs
<div id="image-orig">
<img src="image_example.jpg"/>
</div>
<div id="image-crop">
<canvas id="preview" style="width:548px;height:387px"></canvas>
</div>
image_example.jpg can be image any size.
function updatePreview(c) {
if(parseInt(c.w) > 0) {
var orig = $("#image-orig img")[0];
var canvas = $("#image-crop canvas")[0];
var context = canvas.getContext("2d");
context.drawImage(orig,
c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff,
0,0,canvas.width,canvas.height
);
}
}
$(function(){
$('#image-orig img').Jcrop({
onSelect: updatePreview,
onChange: updatePreview,
aspectRatio : parseFloat($('#image-orig img').width()/$('#image-orig img').height())
});
});
coeff - it's coefficient if size image larger div preview.
That's problem:
http://dbwap.ru/3725988.png
In second div (canvas). Quality image very low.
SOLUTION IS FOUND
canvas.width = c.w*coeff;
canvas.height = c.h*coeff;
context.drawImage(orig,
c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff,
0,0,c.w*coeff,c.h*coeff
);
$(that.el).find("#ImageCode").attr('src', canvas.toDataURL());
$(that.el).find("#ImageCode").show();
I'm just creating image tag and copying from canvas to image.
If you have access to .net, you can modify the way your new images are saved with JCrop:
http://mironabramson.com/blog/post/2009/04/Cropping-image-using-jQuery,-Jcrop-and-ASPNET.aspx
Solution available to you without using server-side (.net / php):
First, make sure that when you use JCrop that you have html5 canvas image smoothing enabled:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
If that is already set, or has no effect, then I think your only other options to investigate image option available to you through each browser:
Enable smoothing in Mozilla - See this article as an example (look for 'mozImageSmoothingEnabled'):https://developer.mozilla.org/en/Canvas_tutorial/Using_images#Controlling_image_scaling_behavior
Apply filters in IE: http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
Note: There may be some sort of Flash solution that could work but it would probably be too difficult to combine any Flash solution with JCrop and html5 canvas.
im a little stuck using the canvas element in html5, have scoured the net looking for a workable solution but to no avail!
the main issue is that I want to click a button and send just the canvas element on the page to the printer.
i have tried using toDataUrl() - but this just seems to be resulting in a blank white image which has none of the canvas content!
the other issue i am experiencing is that attempting to initiate any javascript functions using "onClick" attached to a form button seems to be being tempermental at best!
here is my current attempt - this works in the sense that it does open a new window and attempt to send it to printer and it does create a base64 string (tested this using the "dataUrl" output on the second lowest document.write line) but as previously mentioned the image appears to be completely blank! (the canvas itself is definitely filled, both with an imported image and some text)
function printCanv()
{
var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var
document.getElementById('testBox').value = dataUrl; //load data into textarea
//attempt open window and add canvas etc
win = window.open();
self.focus();
win.document.open();
win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
((image code is here but site will not let me post it for some reason?))
win.document.write(dataUrl);
win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
win.document.close();
win.print();
win.close();
}
note: the code from "win = window.open()" onwards is currently taken from a tutorial and not my own work!
it is currently being called using <body onload="printCanv";"> - for some reason I could not get this to work at all using a button (little chunk of code below is my attempt which seemed to fail)
<input type="button" id="test" value="click me" onClick="printCanv();"> </input>
apologies is this help request is all over the place! i haven't posted to a site like this before and it didn't like me posting some html/script!
thanks in advance for any help you may be able to offer :)
Edit: draw function:
function copydraw() { //function called "copydraw" (could be anything)
var testimage3 = document.getElementById('copy').getContext('2d'); //declare variable for canvas overall (inc paths)
var img3 = new Image(); //declare image variable called "img3"
var testVar = document.getElementById('userIn').value; //take value from userin box. only updating on browser refresh?
img3.onload = function(){ //when image has loaded (img.onload) run this function
testimage3.drawImage(img3,0,0); //draw "img" to testimage
testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face)
testimage3.fillStyle = "#000000"; //sets fill color
testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown)
}
img3.src = 'images/liecakeA4.jpg'; //source of image
}
This function works perfectly, it draws the object and adds text from the variable, but for some reason it seems to be preventing me from outputting it as an image. I'm really confused!
I'm not sure exactly what's wrong with your code, I suspect in your current version calling printCanv in the body load event will mean you're trying to print the canvas before it's drawn. Running it off the button should work better, I'm not sure why that wasn't working for you as there's no reason in principle why it shouldn't work.
To arrive at a working version I've modified your code slightly:
function printCanvas(el) {
var dataUrl = document.getElementById(el).toDataURL(); //attempt to save base64 string to server using this var
var windowContent = '<!DOCTYPE html>';
windowContent += '<html>'
windowContent += '<head><title>Print canvas</title></head>';
windowContent += '<body>'
windowContent += '<img src="' + dataUrl + '">';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('','','width=340,height=260');
printWin.document.open();
printWin.document.write(windowContent);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
This works for me in the Firefox 4.0 nightly.
One addition to the accepted-best-answer: It doesnt work here with Chrome 17.0.942.0 winvista, because the print-preview-dlg is shown within the website itself and printWin.close() will close the dlg too.
So printWin.close() must be delayed or initiated by the user, but those are no good solutions.
It would be best, if chrome printdlg could have a callback, sth. one knows, printing is done, and can close the window. If this is possible is another question.
Though I think the answer maybe in this other question's answer concerning the pdf specification, is it possible to not display the adobe acrobat toolbars in an embedded pdf document?
If you use any browser besides Firefox browser, then the following code will embed a PDF file without any toolbars:
<embed
src="http://URL_TO_PDF.com/pdf.pdf#toolbar=0&navpanes=0&scrollbar=0"
width="425" height="425" />
Please note that this does not work on Firefox
See the Web Designer's Guide blog post for details.
See the full list of embedded tag parameters for more information.
You can use #toolbar to hide above toolbar.. if toolbar =0, it will disable it.. when toolbar=1, this will enable it.. hope so it will work. this works for me
<embed src="filename.pdf#toolbar=0" width="500" height="375"> (Disable toolbar)
<embed src="path/filename.pdf#toolbar=1" width="500" height="375"> (Enable toolbar
There is no guarantee that using #toolbar=0 in the URL will work, as this is exclusive to browsers that use the Adobe viewer, it may be that other viewers even have similar parameters to maintain compatibility, but certainly not everyone follows that, such as browsers for MacOS browsers or Linux.
In most browsers it is possible to change the view, which also probably will not work with #toolbar=0, because the viewer is something apart from the browser, for example Firefox has its own viewer internally and that does not work with this #toolbar=0, see the result of:
<iframe
src="sample.pdf#toolbar=0"
width="900"
height="200"
></iframe>
<br>
<embed type="application/pdf"
src="sample.pdf#toolbar=0"
width="900"
height="200"
>
And even if it works in Firefox as well as Chrome with extensions, it is possible to change the PDF viewer to anything else that may not support this parameter.
Even if you can remove all the buttons you want, you can still copy your PDF, or images, because everything is downloaded to your computer before rendering, the user can simply press F12 to open DevTools (Chrome / Firefox), look the network tab and filter it to get all PDFs loaded on the current page and by DevTools it will copy the PDF to any folder of it.
There is no way to stop, it is only possible to hinder. As already seen neither "iframe" nor "embed" will solve, I suggest (it's just a suggestion) use PDF.js.
So you can create your own buttons, navigation and the like and everything will run in <canvas>, example:
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5,
canvas = document.getElementById('pdf-example'),
ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page_num').textContent = num;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* show previous page
*/
function onPrevPage() {
if (pageNum > 1) {
pageNum--;
queueRenderPage(pageNum);
}
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* show next page
*/
function onNextPage() {
if (pageNum < pdfDoc.numPages) {
pageNum++;
queueRenderPage(pageNum);
}
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* PDF async "download".
*/
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
//Set loaded PDF to main pdfDoc variable
pdfDoc = pdfDoc_;
//Show number of pages in document
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
#pdf-example {
border: 1px solid black;
}
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<div>
<button id="prev">Previous page</button>
<button id="next">Next page</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="pdf-example"></canvas>
Note that I used 1.5 to scale:
scale = 1.5,
...
var viewport = page.getViewport({scale: scale});
You can change this as needed. I recommend that you adjust it according to the view-port measurement (you can use window.innerWidth to calculate), but also make a minimum measurement, so it will be adaptive to different resolutions.
This works for me for hiding the pdf print view in react application
<iframe src={`${resumeUrl}#toolbar=0`} width="100%" height={500} />