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)
Related
I am currently using this jQuery plugin on my site to pull in a single user review from my Google Places account:
https://github.com/peledies/google-places (unmodified).
It works ok - however I need to extend the code to somehow also pull in and display the avatar/image of the reviewer that I'm pulling in.
<script>
jQuery(document).ready(function() {
jQuery("#google-reviews").googlePlaces({
placeId: 'ChIJ_____....766FU3cfuE',
render: ['reviews'],
min_rating: 2,
max_rows: 0,
personsName: 'Jt D.'
});
});
</script>
I need to extend this to also include the avatar/image of the single review I am displaying.
I have found "profilePhotoUrl" is in the "reviewer" object in the JSON (https://developers.google.com/my-business/reference/rest/v4/accounts.locations.reviews) but I can't work out how to add that to the existing code.
After a bit of twiddling around, I found the following solution.
in the google-places.js, find the renderReviews function:
var renderReviews = function(reviews)
add this:
var img = reviews[i].profile_photo_url;
This returns the image stored in the review as a URL. You can then add it to the output within an img html tag:
if (name === plugin.settings.personsName) { html = html+" <img src="+ img +"> <div class='review-item'><div class='review-meta'><span class='review-author'>"+name+" | <span class='review-date'>"+date+"</span></div>"+stars+"<p class='review-text'>"+reviews[i].text+"</p></div>"
}
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?
This is what i am trying to achieve
When a button is pressed on a specific div in a HTML page, it goes to the HTML2CANVAS function and creates a canvas img. Now i need to attach this image to the body and open an outlook compose box.
1) How to send mail with image embeded in the body from within a web page?
2) How to convert canvas as a displayable image?
This function is the answer to your second question. This function converts a div into a base64 image and on complete render it displays the image to a div or you can do accordingly as you want.
function getImage(){
html2canvas($("#divID"), {
onrendered: function(canvas) {
// For image
var ctx=canvas.getContext("2d");
// ctx.webkitImageSmoothingEnabled = false;
// ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
var convertedImage;
$.when(convertedImage = canvas.toDataURL('image/jpg')).promise().done(function(){
$('#finalImg').prop('src', convertedImage)
});
}
});
}
And the answer to your first question is also the same this converted image can be sent as a image in mail.
But you cannot send a MIME type in mailto body it can only contains plain text as body..
for further reference here is a link
Sending mail from HTML page with image in the body
I am creating an image dynamically on the page using dataURL,
var aImg = document.createElement('img');
aImg.setAttribute('src', dataURL);
aImg.setAttribute('alt', 'pic');
aImg.setAttribute('width', '438px');
aImg.setAttribute('height', '267px');
aImg.onclick = (function() {
//download the image object
})();
I am not sure what to do to download this image object that is a PNG image.
Can someone give hints?
If you want the image to be displayed the follwing should be fine :
aImg.src = YOUR_URL
if you want to save it on to the file , you shoud redirect and let the browser take care of the rest. JS redirect can be done as follows :
window.location.replace(dataURL)
If you want the browser to give a pop-up saying "Save File" check out this link : http://muaz-khan.blogspot.in/2012/10/save-files-on-disk-using-javascript-or.html
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