I'm using Alex Michael's fantastic javascript filtrr library
to allow me to manipulate images on an HTML page. The question I have is how do I do an ajax/jquery post of an image that has been filtered inline on the page? For instance:
<div>
<img id="myimage" />
</div>
<input type="button" onclick="filterImage();" />
Once the filtering has been done, how do I post the contents of the image with id "myimage" back to a server-side PHP script so the filtered image can be saved? The tutorials I've seen for doing ajax image POSTs have all used file uploaders, which isn't what I'm looking for. I want to post an image from the HTML DOM.
Thanks!
Since the library you are using uses the Canvas element, the solution here should apply:
Uploading 'canvas' image data to the server
Related
I am using a JS library called barcode39 to create a barcode image. I already imported the JS library in the static resource and have included the JS in my visualforce page. The barcode is generating fine in the VF page. The problem is I need to render this page as a pdf. When I do that, the barcode image does not appear. I DO NOT want to use the image url from the website barcodeinc because its very unstable. I would like to use this JS library. Can you please let me know what I can do to modify the code below to make the barcode render in pdf as well? Thank you
<apex:page standardController="Opportunity" extensions="LPP_PackingSlip" showHeader="false" sidebar="false" renderAs="pdf" standardStylesheets="false" applyHtmlTag="false">
<apex:includeScript value="{!$Resource.BarcodeScript}"/>
<head>
<body>
<apex:outputText rendered="{!hasPictureDays}">
<!--Header-->
<br/>
<div class="headerSlip">{!Opportunity.Account.Name}</div><br/>
<div class="jobSlip">{!Opportunity.WPA__c}</div>
<center><svg id="barcode"></svg></center>
<br/><br/>
</apex:outputText>
</body>
<script type ="text/javascript">
JsBarcode("#barcode", "{!Opportunity.WPA__c}",{
fontOptions: "both",
font : "OCRB",
textAlign : "center",
Textmargin : 5,
fontSize : 12,
width: 1,
height: 50
});
</script>
</apex:page>
Won't work like that. Visualforce rendering to PDF is done server-side (using a Java library called "Flying Saucer"). There's no browser, no "engine" that can run your JavaScript.
You can ask the user to save the page as PDF. If you need it to be fully automated... there are JS libraries for PDF generation like jspdf? They have bit limited range of features but for basic documents... (do your own research, this is just an example). And watch out for support of non-English characters (Japanese/Chinese/Korean...) - then again, Visualforce PDF generation also struggles with these and only safe font is Arial Unicode MS.
If you need sending an email template with PDF attachment even that library won't help. You'll probably have to look into generating the barcode as image, attaching it to the record maybe (as real File/Attachment?) and then calling the template.
i create a Document(PDF) and get the Content from the Umbraco nodes.
But there's a problem by displaying the images. How can i display or get the images from the Media libary of Umbraco? Is there a way, offered from Umbraco to get the Image(s)?
Thanks a lot.
If I understand your query correctly, you a pretty much there.
You should simply be able to get the umbracoFile path (just like you are for the PDF file) and simply declare it as the img src!
With Razor...
<umbraco:Macro runat="server" language="cshtml">
<img src='#Model.MediaById(#Model.imgProperty).umbracoFile' alt="" />
</umbraco:Macro>
I've removed all post centered markup from my Tumblr theme and instead I'm using ajax to fetch the data. So far, so good. Now I want to add a like button to each post, but I can't seem to find any documents on how to do this (without resorting to their api, which needs oauth to work).
Are there no way to include like buttons when you use ajax to fetch the posts and you rather not go full fledge api with oauth?
Tumblr's new implementation of the "Like button" for individual posts uses an <iframe> element to function. The URL for this iframe is obtainable only through your Theme code.
For example:
{Block:Posts}
<div class="like-button">{LikeButton}{/div>
{/Block:Posts}
What is rendered for the {LikeButton} will look something like this:
<iframe id="like_iframe_84714330251" src="http://assets.tumblr.com/assets/html/like_iframe.html?_v=fa292ab73ee80893ffdf1edfabaa185a#name=blog-name-&post_id=84814329251&rk=reKNyFfj" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true"></iframe>
There does not seem to be any way to obtain this without including {LikeButton} inside of a {Block:Posts}
For using ajax, you could include a hidden element on the page that loads this information and parse it out when loading each page of posts using ajax.
So if in your theme you included something like:
<div id="posts-info" style="display: none;">
{Block:Posts}
<div class="post-info" data-postid="{PostID}">{LikeButton}</div>
{/Block:Posts}
</div>
When you load your posts with AJAX, you would also have to load the correct page of your Tumblr (with this code in the Theme).
You could then parse this information by matching the Post ID's to the posts you fetched with AJAX and insert that <ifame> code.
This is a really round-about solution but it should work.
I have an image preview plugin. It works perfectly with images that are already in the page.
like:
<a href='ImgHandler.ashx?Id=5' class='preview' title='Landscape'>
<img height='18' width='18' class='ImgInCell' src='ImgHandler.ashx?Id=5' alt='Landscape' /></a>
But When i load the same type of code through Ajax on a DIV layer the image hover preview is not working.
<a id="LinkPic" class="preview" title="Land Scape" href="ImgHandler.ashx?Id=5">
<img id="ImgPic" style="height:50px;width:50px;" src="ImgHandler.ashx?Id=5" alt="Land Scape">
</a>
Then i used firebug and copied the source after the load of AJAX; created a html page; then on loading it, I see the image hover on the AJAX Image is working Fine.
The Jquery code for The image preview is called by following.
$(document).ready(function () {
imagePreview();
});
I think it is not working due to the document.ready . How do i make the image preview work on AJAX data(Image)??
Calling the imagePreview(); after the AJAX call didnt help.
i found no other way than to insert the jquery code into the AJAX called document (partial view) with change in class like imgpreview2, and now its working fine.
I wondered if it is possible to show picture in a view without calling an action. The picture is displayed by using the following Razor code:
<img class="photo" src="#Url.Action("GetImage", "Home", new { id = #Model.Id })" />
But retrieving picture from server requires an additional request.
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
Thanks,
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
You could use the Data URI scheme. But be careful as it might not be supported by all browsers.
Example:
<img class="photo" src="data:image/png;base64,iVBORw0KG....." alt="" />
where src attribute of the image contains the Base64 encoded image that could come from ViewBag or a view model.