Really need your help, I have the below javascript code:
document.querySelector('#btnCrop').addEventListener('click', function(){
var img = cropper.getDataURL();
document.querySelector('.cropped').innerHTML += img;
})
The "img" has a value:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAYAAACJm/9dAAAgAElEQVR4Xuy9B6CdZZUuvE56771AQgqEGgKEkNCrgoAFRFQQHevM+Ht/nTsX5/7XmXFm1Jlx7HVGZSxIN0iXIqFLSEgIkALpvScnvZ/7rPaW7/v2PicQEPzdGs7eX3nLeldf611vAxE14d+b/rn2/DPos5ddSN26
so what is does in php is to display it via:
$img = (div class="cropped" style="float: left;margin-top:-653px;margin-left: 630px;border:1px solid violet")(/div)
What I need is to display it without div. Just the value of the "img".
Replace
document.querySelector('.cropped').innerHTML += img;
with something like this:
document.write("<img src=\"" + img + "\" style=\"\">");
That will just write it in document. But basically it's the same when extending it to something.
Something like this is more what you want I guess:
$('img#ID').attr('src', img);
(This wil set the src value (Base64) in the image. If you want you could hide it at first and then use $().show() to make the image visible again.
Related
I'm a beginner.
I encounter a small problem which is I cannot add an image to my div block.
here is my HTML code
<span class = 'memepic'>
<img src ="https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU">
</span>
and I wrote my js code is like this one
//it is my <span> id
const img = document.getElementsByClassName('memepic')
//it is my divblock id
const memebox = document.querySelector('#meme')
for(i of img){
i.addEventListener("click", function(e) {
console.log(e)
memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';
});
}
the error shows my console is
e.path[0].currentSrc:1 GET file:///C:/Users/kevin/Desktop/bootcamp/officialclass/meme%20generator/e.path[0].currentSrc net::ERR_FILE_NOT_FOUND
my purpose is when I click that picture, that picture will show on my divblock which is in the center of the screen.
I checked the path[0].currentSrc is correct.
and it will show the picture if I replace 'e.path[0].currentSrc' to the content inside the 'e.path[0].currentSrc'.
like this
memebox.style.backgroundImage = 'url("https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&usqp=CAU");
Hey can you try this code in for loop :
`url(${e.srcElement.currentSrc})`
Javascript doesn't parse variables that are inside a string, so you're asking for the background URL to literally be set as "e.path[0].currentSrc".
Instead of this:
memebox.style.backgroundImage = 'url("e.path[0].currentSrc")';
Do this:
memebox.style.backgroundImage = 'url("' + e.path[0].currentSrc + '")';
I have a div that has an img inside it. As those are generated, I want to take the img src and set it in the background property of the outer div.
(I am trying to do a circle image, then followed a tutorial)
I have this.
The JS
<script type="text/javascript">
$(document).ready = (function() {
var someId = $("#someId");
$.each(someId, function(index, value) {
var src = value.find('img').attr('src');
value.css('background', 'url(' + src + ') no-repeat');
});
});
</script>
The HTML
<div class="body">
<h2><img alt="image" src="img-src" /></h2>
</div>
However when I run the site, the background property is not set.
Here is the fiddle.
Few Observations
value inside the handler is not a jQuery object so it won't have methods like find()
document.ready() is a function you need to pass your ready handler as a parameter to it
you can use the .css(property, function(){}) to set the css property
Try
jQuery(function ($) {
var someId = $("#someId");
someId.css('background', function () {
console.log('x')
return 'url(' + $(this).find('img').attr('src') + ') no-repeat'
})
})
Demo: Fiddle
You have syntax errors, missing a }); at the end of the $.each( code.
And logic errors as well. value in your code is going to be the imgs you found via .find(), and you're trying to to take the src of those images and set that as the background of the image...
setting a background on an image makes no sense whatsoever.
I have a function in which when the function is called I need to have text and an image pop up. My javascript is:
function Upload(){
if(value !- ''){
$("#divValue").html("Uploaded: " + //i need to add an image here );
}
So where it says //I need to add an image here, this is where my image, lets say its tire.gif, needs to be added so when the javascript is called it displays the text and image together.
you can use document.createElement method to create a img Object and simply set the source and optional height and width, then add it to your div using "append":
var img = document.createElement('img')
img.src = //URL to your image
$(img).css('width','50px'); //set the width (optional)
$(img).css('height','50px'); //set the height (optional)
//finally append the newly created image object to your "DivValue"
$("#divValue").append(img);
Can you try this,
function Upload(){
var value="some value";
if(value != ''){
$("#divValue").html("Uploaded: <img src='../images/tire.gif' />" );
}
}
It is actually pretty straight forward. You just need to pass the tag inside the string that will replace the html.
Check this jsFiddle
But you just need to do:
$("#divValue").html("Uploaded: <img src=' PATH_TO tire.gif ' /> ");
Watch the difference between " and ' to avoid syntax problems.
Cheers.
You mean like this?
$("#divValue").html('Uploaded: ' + '<img src="image.jpg" alt=""/>');
I'm trying to add some html markup to the WYSIWYG CLEditor from outside of the editor itself using jQuery.
So far I have...
$('.add-image').click(
function()
{
theurl = $(this).text();
theimage = '<img src="' + theurl + '" />';
// Now What?
}
);
But I'm at a loss as to how to add the string in to the WYSIWYG and it's starting to drive me crazy!
This will overwrite:
$("#inputID").val(theimage);
$("#inputID").cleditor()[0].updateFrame();
This will append:
currentval = $("#inputID").val();
$("#inputID").val(theimage);
$("#inputID").val(currentval + theimage);
Or maybe try this:
$('#inputID').val('new text data').blur();
Where inputID is the ID of your CLEditor input.
Also, this has some discussion around this:
CLEditor dynamic adding text
Just made 2 small edits to CCCasons solution to make it work as intended.
$('.add-image').click(
function()
{
theurl = $(this).text();
theimage = '<img src="' + theurl + '" /><br/>';
// Get the current value of the textarea otherwise it will be overwritten
currentval = $("textarea.wysiwyg").val();
$("textarea.wysiwyg").val(currentval + theimage);
$("textarea.wysiwyg").cleditor()[0].updateFrame();
}
);
1) Added a line break to the end of the inserted link. Otherwise when you try to type in the wysiwyg after adding the image it inputs inside the link.
2) Grabbed the current value of the textarea first to stop it being overwritten by the image.
Again, thanks a lot to CCCason!
I have a page with pictures, which I want to displayed in a popup.php when clicking on them.
I want the popup window to display a picture(the one I'm clicking on), some text, and a print button.
I'm doing this on the page:
<img src="graphics/picture1.png" width="340" height="200" border="0"/>
In the JS file:
function popup()
{
window.open('popup.php', 'window', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
}
function showImg(img)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
}
And in the popup.php:
<img src="graphics/picture03.png" onload="showImg(this)" />
There should be an obvious way, but I can't find it.
I would think adding the image name and text content to the URL would be the obvious way.
popup.php?image=myImage.gif&text=Say%20something%20witty%20here
Well, you'll want to have your popup contain a holder for the image (which it seems like you already have), but you'll also need to have a holder for your text. Your popup.php should have something like <div id="textHolder"></div> - then your javascript function needs to accept the appropriate text as well as populate it into the textHolder div.
I'm not sure how you're calling these JS functions, or from where - so some of the code might need to change - it should be something to the tune of....
function showImg(img, textHolderObj, text)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
textHolderObj.innerHTML= text
}
If is that simple, you could create it:
var win = window.open('', 'win', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
var img = win.document.createElement('img');
img.src = 'image.png';
img.alt = 'Some text';
var label = win.document.createElement('p');
label.innerHTML = 'Some text';
var button = win.document.createElement('a');
button.href = 'javascript:window.close()';
button.innerHTML = 'Close';
win.document.body.appendChild(img);
win.document.body.appendChild(label);
win.document.body.appendChild(button);
I don't get the question too well. You want to access a function that was defined in the page that opened a popup? You should be able to use opener.showImg(this)
your popup has no idea what image you clicked on. you need to do this:
onClick="popup('imgSrc')"
and in your window reference:
window.open('popup.php?imgSrc='+imgSrc, ...
then... your popup window has to run off of url vars, but php now knows what its looking for:
<?php echo '<img src="' . $_GET["imgSrc"] . '" />'; // this is going to load the image, so you don't need the onLoad()
It is possible to create a new popup window using a variable
top.mydocument=window.open('','window','toolbar=no,location=no,
status=no,menubar=no,scrollbars=no,resizable=no,
width=520,height=400,left=350,top=100');
and then use document.write to write the content:
top.mydocument.document.write(
'<html><head></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+'imageName/imagePath.png'
+'</body></html>'
)
Make sure you close it.
top.mydocument.document.close()