I add several images using fromURL, all from external sites(not sure if that has anything to do with the issues):
fabric.Image.fromURL('<zillow listing image URL>', function (img) {
...scaleToHeight stuff...
...clipPath stuff to do some masking...
canvas.add(img);
});
Output to PNG. Had to use this workaround to get around a chrome frame issue with jsPDF
function debugBase64 (base64URL) {
var win = window.open();
win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}
debugBase64(canvas.toDataURL('png'));
....I have tried this PNG export and a few others and it's always the same thing. All of the text and basic shapes show up great, but never the images that I brought in with fromURL. Any advice would be greatly appreciated.
I am implementing this in Vue. I put most everything initially in 'mounted' and was just putting 'console.log(canvas.toJSON());' at the end of the section. Apparently this was still affected by racing, though. Because when I instead added a button to log the JSON it included the image objects as well.
Related
I am trying to render pdf using react-pdf the issue I am facing is that I am displaying image from the backend server using the URL. But it displays blank in the pdf. When I debugged further came to know that when I put breakpoint on the highlighted line the image gets displayed. May be it gets little time to load the image from remote URL ?
<Page size="A4" style={styles.page}>
{this.state.productsToBeExported.map((product) => {
const img = this.getImageSource(product);
//if breakpoint is added here then the images are displayed
return (
<View
key={product.productId}
style={styles.section}
>
<Image
style={{
width: imgWidth + "px",
border: "2pt solid #999898",
}}
src={img}
></Image>
</View>)
});
</Page>
//remote Image Url (Node server)
getImageSource(product) {
return `${URL}/${this.props.timestamp}/${product.productId}.jpg`;
}
PDF OUTPUT
Any help would be much appreciated.
Note: These images are generated in the backend on the fly. So I can't import them.
I ran into the same issue and it seems to be an issue with react-pdf. It seems to be showing files with the .jpeg extension only
I am writing an web app that saves html to onenote. In order to save math formulas, I plan to convert math formulas to svg by MathJax.js and then convert svg to png, because the html/css supported in onenote api is limited.
But it seems the svg generated by MathJax.js in browser is not a valid svg. I tested it with a simple math formula: $$a^2 + b^2 = c^2$$ (demo code) and copy the svg to jsfiddle and it displays nothing.
Then I tried to write a MathJax-node demo and copy the svg to jsfiddle again, it looks good. Here is my demo code, it's almost the same as the GitHub repo demo:
// a simple TeX-input example
const fs = require('fs')
var mjAPI = require("mathjax-node");
mjAPI.config({
MathJax: {
// traditional MathJax configuration
}
});
mjAPI.start();
var yourMath = String.raw`a^2 + b^2 = c^2`
mjAPI.typeset({
math: yourMath,
format: "TeX", // or "inline-TeX", "MathML"
svg: true, // or svg:true, or html:true
}, function (data) {
if (!data.errors) {console.log(data.svg)}
// will produce:
// <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
// <mi>E</mi>
// <mo>=</mo>
// <mi>m</mi>
// <msup>
// <mi>c</mi>
// <mn>2</mn>
// </msup>
// </math>
fs.writeFile('math.txt', data.svg, (error) => {
console.log(error)
})
});
I also tested two svg with cloudconvert, it's the same result. Why are the two svg different? Do I miss something?
The difference is due to a specific setting: useGlobalCache
By default, MathJax (docs) sets this to true while mathjax-node (docs) sets this to false.
On the server MathJax-node does not have any document context and produces self-contained SVGs. On the client, MathJax has a full document context and thus can re-use the SVG paths across equations.
I'm making a page builder type thing. For normal view the iframe needs to resize accordingly, but for mobile / tablet views it needs to be a set size.
using iframe-resizer https://github.com/davidjbradshaw/iframe-resizer by #david-bradshaw
parent window:
<script type="text/javascript" src="javascript/iframeResizer.min.js"></script>
....
$("iframe")[0].iFrameResize({
checkOrigin: false,
enablePublicMethods : true,
heightCalculationMethod: "bodyScroll",
});
....
The viewpoint size changer does this :
// set the iframes width and height "before" iframeresizer does stuff to make it look seemless
_this.editor.css({
"width":mapper[size].width,
"height":mapper[size].height
})
Only way I saw the .size() working is from the iframe itself
// fire off a sendMessage cause only way i saw .size() working is from the iframe itself
_this.editor[0].iFrameResizer.sendMessage({
"width":mapper[size].width,
"height":mapper[size].height,
"forceSize":true
});
iframe window
<script>
var iFrameResizer = {
messageCallback: function(message){
console.log("messageCallback")
console.log(message)
if (message.forceSize==true){
console.log(window.parentIFrame)
window.parentIFrame.autoResize(false);
window.parentIFrame.size(message.height); // Set height to 100px
} else {
// apply auto resizing again
}
}
}
</script>
<script type="text/javascript" src="javascript/iframeResizer.contentWindow.min.js"></script>
I was hoping for an easier way like on parent disableIframeResizer() or something, or being able to set .size() from parent since that's where the choose your viewpoint parts live.I can't seem to figure it out :(
My issue is: I need to somehow tell the iframe not to do its resizing when forceSize = true and then when the message comes in then to resize accordingly .
Thanks for a pretty decent library tho!
I don't think I understand your question 100%. But I tried to answer your question as best as I understood.
You can set an iframe's size really simply in html. You can also do it with the help of CSS.
You could do this: <iframe href="https://google.com" width="100%" height="100%">Your Browser Does Not Support Iframe</iframe>.
You could also set the exact diameter like this: <iframe href="https://google.com" width="300px" height="100px">Your Browser Does Not Support Iframe</iframe>
You could also use php to automatically change the diameter of it.
Good day.
I use script Imagecropper
Script:
<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="768" width="1024">
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
result:
But if i do not specify the image size, then i get next(see image):
<img src="http://test.com/img/1362244329.jpg" id="yui_img">
result:
And if i specify the wrong picture size, the window will increase the portion of the image:
<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="333" width="500">
result:
How to make in tag image does not necessarily will been to specify its size?
First of all I'd like to point you to YUI 3 since YUI 2 is no longer supported. You shouldn't write new code using YUI 2. There's an ImageCropper component I wrote for YUI 3 that works just like the YUI 2 version in the YUI Gallery: http://yuilibrary.com/gallery/show/imagecropper. Since it copies what the YUI 2 ImageCropper did, it shares these issues with the older version.
What to do when the size of the image isn't specified
The reason why you're getting a small ImageCropper is that you're creating the widget before the image has been fetched and so the browser doesn't know its size yet. What you can do is wait for the image's onload event. You can listen to that event and create the ImageCropper after it fires:
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var yui_img = Dom.get('yui_img');
Event.addListener(yui_img, 'load', function () {
var crop = new YAHOO.widget.ImageCropper(yui_img);
});
})();
Why the ImageCropper doesn't work with images with the wrong size
Neither the YUI 2 ImageCropper nor my YUI 3 version work with images when they don't have the right size. The reason is that both use the background: url() CSS style for showing the image inside the crop area (the non-darkened part of the widget). CSS backgrounds don't let you use a resized/zoomed image.
I plan on using another strategy at some point for the YUI 3 version that will fix the issue. However, you need to keep in mind that the ImageCropper component is designed so that you send the crop coordinates to the server for it to actually crop the image. That means that if you have the wrong size set to the image, the coordinates that the image cropper returns with its getCropCoords method wouldn't be the coordinates that match with the full sized image. Instead you'd also have to send the server the size of the image you've been using and do extra math to crop the image correctly.
In conclusion, you shouldn't use the image with the wrong size. You can fix the size of the image in two ways:
Use the HTML5 naturalWidth and naturalHeight attributes of the image. Those return the real size of the image even if it's resized. Unfortunately these attributes are not yet supported by all browsers.
Create a new image with JS, set it the same src as the image you're using, listen to its load event and get that image's size.
Something like this:
(function () {
var Dom = YAHOO.util.Dom;
var yui_img = Dom.get('yui_img'),
new_img = new Image();
new_img.onload = function () {
yui_img.width = new_img.width;
yui_img.height = new_img.height;
// create the ImageCropper
};
new_img.src = yui_img.src;
}());
A YUI3 version
You can easily do all this with YUI3:
YUI().use('gallery-imagecropper', function (Y) {
var img = Y.one('#yui_img');
img.on('load', function () {
var cropper = new Y.ImageCroper({
srcNode: img,
width: img.get('width'),
height: img.get('height')
});
cropper.render();
});
});
Typo in code. Should be
var cropper = new Y.ImageCropper({
You missed a letter "p".
I need to show a hidden div that is attached to a .box div , my masonry code is
$(function(){
var $container = $('.content');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
isAnimated : true,
isResizable : true,
});
});
});
Its loads a boxes with images and text , but when i want to show a specified DIV
Masonry want move in height , so my hidden div is showing behind a .box div
$('.commentopen').live("click",function()
{
var ID = $(this).attr("id");
$("#commentbox"+ID).fadeIn('slow');
return false;
});
Any ideas how to extend a height in the same window with out reloading
i tries masonry .reload or .reloadItems but with no luck , i think because of .imagesLoaded function
Here a visual explanation
All I can understand is that when a "hidden" div is shown, your Isotope layout does not react correctly (repositioning the other elements when the height grows). So, maybe this fiddle here is of some help. If you'd post a link to your sandbox or provide a jsfiddle yourself, it'd be easier to debug. You seem to also load large images via imagesLoaded, so if that's not correctly implemented, it could also play a role.