I have a big DIV at my html that I'm converting this using canvas (jspdf is doing this) taking a screenshot and putting the image ate the pdf.
My code is like this:
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(
$('#myElement'),
{
format:'png',
pagesplit: true
},
function(canvas) {
console.log(canvas)
$(window).scrollTop(scrollTop)
pdf.save(pdfName);
}
);
The problem is that when I use "pagesplit = true" JSPDF split the image in some pages, it's nice! But the image becomes stretched totally disfigured.
There is some way to avoid image get stretched when using pagesplit?
Related
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:
I am using html2canvas and jsDoc. I am rendering my current component html to pdf.
But somehow color of other component is overlapping to the current component after I download the pdf. This is Angular component.
Screenshots :
Screenshot from application
Screenshot from pdf viewer (Sidebar visible):
3.Screenshot from pdf viewer (Sidebar hidden):
You can see the color is overlapping from submit button till end.
Code :
downloadPdf() {
html2canvas(document.querySelector(".main-content")).then(canvas => {
var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
var imgData = canvas.toDataURL("image/jpeg",1.0);
pdf.addImage(imgData, 0, 0, canvas.width, canvas.height);
pdf.save('image.pdf');
});
}
Any guess why that color is overlapping? Any other solution to render HTML to pdf?
maybe my answer help someone. I resolved similar issue by adding a scale property
html2canvas(document.querySelector('#preview_modal'), {
allowTaint: false,
useCORS: true,
scale: 2,
})
i have a json data like that
{ "ikealogo": "https://xxx.blob.core.windows.net/logo/24536.jpg?v=20120912144845" }
how can i convert it in image view?
Things i have tried but need alternate solution. it works fine in popup window but **i need to convert it for my content script in a specific webpage, when user will hover mouse on a text and should appear this image ** but applying same process is not working at all.
//popup.js
var image = document.getElementById('img');
image.src = jsonData.ikea.ikealogo;
//popup.html
<img id="img" />
SOLUTION:
To appear any image from external server on DOM :
I parse data from API response and create div with jquery and append the image data inside it.
There's NO need for CROSS DOMAIN COMPLICITY.
var image= data["company"].ikealogo;
var div=jQuery('<div/>',
{
"class": "divC",
});
var i = jQuery('<img />').error(function()
{
this.src = default_image;
}).attr('src', image)
.css({ "width":"50px", "height": "50px","margin": "0px 10px 10px 10px"});
div.append(i)
I'm having problems using the jQuery Fancy Zoom plugn.
In my page I have the following HTML snippet:
<a href="ProjectImage?ID=#img.ID&Full=true">
<img class="content-image zoom" alt="#img.Name" src="ProjectImage?ID=#img.ID"/>
</a>
On page ProjectImage have:
#{
if (Request["ID"].IsInt())
{
var imgID = Request["ID"].AsInt();
var full = (!string.IsNullOrEmpty(Request["Full"]) && Request["Full"].IsBool() && Request["Full"].AsBool());
//Data
var db = Database.Open("AMSDArquiteturaConnectionString");
var image = db.QuerySingle("select * from Images where [ID] = #0", imgID);
if (image.MimeType.StartsWith("image"))
{
Response.AddHeader("content-disposition", "inline; filename=" + image.Name);
}
else
{
Response.AddHeader("content-disposition", "attachment; filename=" + image.Name);
}
Response.ContentType = image.MimeType;
if (full)
{
Response.BinaryWrite((byte[])image.ImageFull);
}
else
{
Response.BinaryWrite((byte[])image.File);
}
}
}
Note that the same, the low image of the database once the user clicks on the image to show larger picture.
The problem is that this way the plugin does not work.
It simply displays the image in actual size on your browser and loads the whole page again.
If I put an image, it works normally.
I'm getting stuck. Thanks for the help.
Here are a few links from the plugin I used:
http://www.hardleers.org/multimedialab/js/demo.html
http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/
http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/
This is the javascript I use to configure the plugin
//Set Zoom
$.fn.fancyzoom.defaultsOptions.imgDir='../Images/';
$('.project-imagepreview a').fancyzoom({Speed:400, scaleImg: false, closeOnClick: true});
$('img.zoom').fancyzoom();
I guess your Javascript's 3rd line should be $('img.fanzyzoom').fancyzoom(); as given in the references.
In my case when zoom out the image, It show me picture with alot of meanless symbols.
can show up my image, but plugin can not zoom it. I had tried with fancyboxm lightbox, thickbox....
plugin still work fine if I replace url: web/images?id=..... with web/images/somepicture.png
Google Image Search returns Images of different sizes. even their Thumbs are of different size. But still they are arranged in such a way that keeps a clean margin. even resizing the browser keeps the left and right alignment proper. What I've noticed is they group a Page of Image into an ul and each image is in an li. not all rows contain same amount of images. But still how they manage to keep images of different sizes properly aligned ?
EDIT
Though I've accepted an answer Its not exact match. It may be a near match. However I still want to know What is the exact procedure they are doing. I cannot chalk out the pattern.
It seems that they wrap a page in a <ol> and put images in <li> But when I resize the images are redistributed among pages. But how many images the page <ol> should contain now is to be decided. What procedure can be used to accomplish that ? and also images are resized based on a standard height I think. and that standard height is changed on resize. How how much ? how that is decided ?
It's not exactly the same thing, but you might get some useful ideas about how to optimize image "packing" by looking at the approach taken by the jQuery Masonry plug-in.
They know how big each thumbnail is, since it's stored in their image database. They just make each <li> float left, and make them a fixed size based on whatever the largest image is within that section of images.
I've written a little plugin just to do that HERE you can watch it in action:
(function($){
//to arrange elements like google image
//start of the plugin
var tm=TweenMax;
var positionFunc= function(options, elem){
var setting=$.extend({
height:150,
container:$('body'),
margin:5,
borderWidth:1,
borderColor:'#000',
borderStyle:'solid',
boxShadow:'0 0 0 #000',
borderRadius:0,
type:'img'
},options);
tm.set($(elem),{
'max-height':setting.height
});
$(elem).wrap('<div class="easyPositionWrap"></div>');
var winsize=setting.container.width();
var thisrow=0;
var elementsused=0;
var row=0;
tm.set($('.easyPositionWrap'),{
border:setting.borderWidth+'px '+setting.borderStyle+' '+setting.borderColor,
borderRadius:setting.borderRadius,
boxShadow:setting.boxShadow,
margin:setting.margin,
height:setting.height,
position:'relative',
display:'block',
overflow:'hidden',
float:'left'
});
$('.easyPositionWrap').each(function(index, element) {
if(thisrow<winsize){
thisrow+=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
else{
var currentwidth=thisrow-$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').width()-(setting.margin*2)+(setting.borderWidth*2);
var nextimagewidth=$(this).prev('.easyPositionWrap').width()+(setting.margin*2)+(setting.borderWidth*2);
var elems=$(this).prevAll('.easyPositionWrap').length-elementsused;
var widthtobetaken=(nextimagewidth-(winsize-currentwidth))/(elems);
if(widthtobetaken!=0){
if(elementsused==0){
$(this).prevUntil('.easyPositionWrap:eq(0)').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
$('.easyPositionWrap:eq(0)').width($('.easyPositionWrap:eq(0)').width()-widthtobetaken);
$('.easyPositionWrap:eq(0) '+setting.type).css('margin-left','-'+(widthtobetaken/2)+'px');
}
else{
$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
}
}
elementsused+=elems;
thisrow=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
});
$(window).resize(function(){
clearTimeout(window.thePositionTO);
window.thePositionTO=setTimeout(function(){
$(elem).each(function(index, element) {
$(this).unwrap('.easyPositionWrap');
$(this).data('easyPositioned',false);
});
$(elem).easyPosition(options);
},200);
});
}
$.fn.easyPosition= function(options){
if($(this).data('easyPositioned')) return;
positionFunc(options, this);
$(this).data('easyPositioned',true);
};
//end of the plugin
}(jQuery));
$(window).load(function(){
$('img').easyPosition();
});
libraries to include:
jQuery
GreenSock's TweenMax