I've been stuck for so many days on this.
I'm seeing a lot of the same problem like this, but some of the codes from them won't work on me. To be precise, I'm not using php 5 nor 7. But this is what I've got so far.
(Assuming there are drawings in this canvas) my html:
<canvas id="displaycanvas" height="400px" width="700px" style="position:absolute; background-image:url('images/canvas_pattern.jpg');background-attachment:fixed;"> </canvas>
<canvas id="display_text" height="400px" width="700px" style="position:absolute;" > </canvas>
<input type="button" name="btn" id="submitBtn" value="display" class="btn btn-primary" />
And I successfully converted my canvas to image and displays it!
$(function () {
$("#submitBtn").bind("click", function () {
var display01 = $('#displaycanvas')[0].toDataURL();
$("#show_canvas").attr("src", display01);
$("#show_canvas").show();
});
});
display part of the image: (works fine)
<img id="show_canvas" name="show_canvas" height="400px" width="700px"/>
now after displaying, I have a button "save" which means to store the image or canvas in my database and it executes at the "submit.php".
but I'm stuck on how am I going to store it in my database...
right now I only have a primary key on my "Image_table", not sure what are the right attributes to add.
Thank you in advance!!
Related
I am working on a project in which I will be getting HTML file from another source and it can have multiple images, so I cannot modify HTML file. I am planning to write a java script in order to solve below issue.
But that file has some img sources which are not present so image is not getting loaded.
I want to display a particular message like "Please login in order to view this image" instead of unloaded image if it is not loaded while if other images are loaded they should be shown as it is.
It will be helpful if someone can provide any feedback.
Here is how to test after the page has loaded
window.addEventListener("load", event => {
document.querySelectorAll('img').forEach(img => {
const isLoaded = img.complete && img.naturalHeight !== 0;
if (!isLoaded) img.outerHTML = "Please login in order to view this image"
})
})
<img src="image1.jpg" /><br/>
<img src="image2.jpg" /><br/>
<img src="image3.jpg" /><br/>
<img src="image4.jpg" /><br/>
<img src="image5.jpg" /><br/>
<img src="image6.jpg" /><br/>
If I correctly understand what your're asking, you can do this by using alt within the HTML tag. For example:
<img src="computer.jpg" alt="Computer Image" width="500" height="600">
If you run that snippet, you can see that since the image is not defined, text will appear.
I have a button on my html code:
<input type="button" id="myBtn" value="Next Widget" onclick="next()">
and on my javascript I have:
images = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg'];
page = 0;
function next()
{
page++;
page %= images.length;
document.getElementById('myImg').src = images[page];
}
Also on HTML code:
<div>
<img id="myImg" width="auto" height="auto" src="img/1.jpg" alt="1">
<br>
</div>
Basically I need to change it from the saved images source to a RESTapi Url, which is sorted by id (1 to 10).
Not sure how I do this. Can anyone give me an idea.
Do I have to declare the RESTapi Url first on the javascript?
I have tried just pasted the URL in the src="My URL here". But this only shows me a broken link.
If you have direct image url you can just copy paste in your images array. If it is not the case then you will have to load your images or data first through rest api call.
i have html code and jquery to show and hide a form based on image loaded or not loaded like this
...
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#image11")
.load(function(){
alert('oke1');
$("#upload1").hide();
$("#image21").hide();
})
.error(function(){
alert('oke2');
$("#image11").hide();
$("#upload1").hide();
$("#image21")
.load(function(){
alert('oke3');
$("#upload1").hide();
$("#image11").hide();
})
.error(function(){
alert('oke4');
$("#upload1").show();
$("#image21").hide()
$("#image11").hide();
});
});
})
</script>
<body>
<div class="col-sm-5 col-xs-7">
<img src="foto_peserta/tes.jpg" width="100" id="image11" alt="tes"/>
<img src="foto_peserta/cek.jpg" width="100" id="image21" alt="tes2"/>
</div>
<div id="upload1">
<form method="post" name="form1" action="<?php echo $editFormAction; ?>" enctype="multipart/form-data"><img id="previewHolder" alt="Foto" width="100px" height="100px"/> <p>
<input type="file" name="foto_peserta" id="foto_peserta" required>
<p class="help-block">maximum image size is 50 kB,only JPG, JPEG, PNG & GIF files are allowed</p>
<button type="submit" class="btn btn-success">Upload Foto</button>
<input type="hidden" name="MM_update" value="form1" >
<input type="hidden" name="id_personal" value="<?php echo $row_foto_peserta_tampil['id_personal']; ?> ">
</form></div>
</body>
</html>
I just confused why every time i refresh the page (when my image21 is load and my image11 not loaded) the alert ('oke2') prompt but not with alert('oke3'), is anything wrong with my code?
The load function you are talking about is deprecated since jQuery 1.8:
http://api.jquery.com/load-event/ (see the category of the article)
jQuery or Javascript check if image loaded
In later versions only one .load() function is left into jQuery, to avoid ambiguity, it is used to load data from another source http://api.jquery.com/load/ for example if you need to load text coming from your server into a div in your page.
You can check if an image loaded by using
$('img.mustLoad').on('load',function(){
/* Fire your image resize code here */
});
This very complicated snippet is taken from the currently second answer of the question i posted above so credit is due to "Alex W". This should work with every version of jQuery
to handle loading errors you need to use a separate event
$('img.mustLoad').on('error',function(){
/* Fire your image resize code here */
});
So you need to edit your code accordingly
I have an image generated from another php page
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
a captcha image is created each time.On each refresh a different image is generated.
But what I want is to put a button there which changes the image without refreshing the whole page.
<input type="button" value="refresh" onclick="refresh();">
and the my js code is
function refresh(){
document.getElementById("imagid").src="sample.php";
}
It doesn't work,how to change the image src by js
In your JS code you're trying to change the "src" attribute of the button, you need to apply the id to the image, not the button.
What you need to do is have the following :
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
<input type="button" value="refresh" id="imagid" onclick="refresh();">
<script>
function refresh() {
document.getElementById("imagid").src = "sample2.php";
}
</script>
try this
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
<input type="button" value="refresh" id="buttonid" onclick="refresh();">
<script>
$('#buttonid').click(function()
{
$('#imageid').attr('src','sample2.php');
}
</script>
The problem could be that image has been cached by browser because of its MIME type.
there are various ways to tackle it,
1)use different page name altogether,sample1.php,sample2.php.....
But you cannot create infinite number of page.
2)Use salting in URL, ie sample.php?rand=1,sample.php?rand?=2....
This rand parameter will keep updating all the time and on each request to server you will generate new image.
There are other advanced ways also ,but this are the one to get started.
Your error is here.You have not assigned id to your image tag and in your js code you are trying by button id.
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
function refresh(){
document.getElementById("imagid").src="sample.php";
}
Note :
Make sure you the IDs for button and image tag.No two elements should have same Ids.
Hope this helps...
I am working on a site where there is a feature for users to be able to sign directly on the webpage using a canvas free form pen tool. When users click the 'apply signature' button the signature that the user drew is converted into an image and saved on the page as an <img src=""> (as you can see in the code below). Up until this point everything works great.
The problem is, When the user submits the form, I am trying to get the newly created canvas image to submit with it as a post variable and render on the process.php page as the signature that was signed. It appears that image (toDataURL()) gets passed as a post variable, but for some reason it does not render on the process.php page. It appears like the image source is not found.
I am new to javascript and I have been trying to fix this problem for days now, I would appreciate any help with fixing this. Many thanks in advance!
Markup
<div class="signature-field">
Sign:
<span class="sketch-container">
<canvas id="simple_sketch" width="350" height="100"></canvas>
</span>
Date: <input name="signature-date" type="text"><br/>
<div class="signature-buttons">
<span class="save-signature">Apply Signature | </span>
<span class="reset-canvas">| Reset Signature</span><br/>
</div>
</div>
<form method="post" action="process.php">
<input type="text" name="fname">
<input id="signature" name="signature" type="hidden">
<input type="submit">
</form>
JavaScript
$(function () {
var sktch = $('#simple_sketch').sketch();
var cleanCanvas = $('#simple_sketch')[0];
$('.save-signature').click(function () {
/* replace canvas with image */
var canvas = document.getElementById("simple_sketch");
var img = canvas.toDataURL("image/png");
$('#simple_sketch').replaceWith('<img src="' + img + '"/>');
$('.signature-buttons').replaceWith('');
document.getElementById("signature").value = $('.sketch-container').html();
});
});
I'm not quite sure what you're doing here, but if you want to post the image data through the hidden signature field, simply do this:
document.getElementById("signature").value = document.getElementById("simple_sketch").toDataURL("image/png");
As right now, it looks like you're posting the image data including <img> tags ("<img src="<DataUrl>"/>")
How about your server-side code, is the img param output empty? Are you sure the img data is being sent through the request? Try some packet sniffing tool like Fiddler or Wireshark and analyze the contents of the request (You can also take a quick look with Firebug).
Perhaps you could try some other approach to convert the img data:
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas