I am trying to capture div content and save it as an image. That div content contains image over an image. The base image will remain the same, and when the user browses and selects an image file it will display over the base image. Now when user will press button I am capturing that div content.
The problem is that the first time, when the default image is over a base image, and press submit button it will capture both image and convert it into a new image.
After that when the user browses and selects a new image it will display over base image, but when pressing button it will generate new image of only base image and the user selected image is not coming on captured image.
<script>
$(function() {
$("#proceed").click(function() {
html2canvas($("#wrap"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
window.open(canvas.toDataURL('image/jpeg'));
}
});
});
});
//display user uploaded image
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<input type="file" onchange="loadFile(event)">
<input type="button" value="Capture" id="proceed"/>
<div id="wrap">
<img src="1.png"> //base image
<div id="draggable">
<img id="output" src="admin/images/allproduct/no_image.png" /> //user selected image
</div>
</div>
I have done the same task like yours using AngualrJS. This framework has some advanced features like Directives and Filters.
https://docs.angularjs.org/api/ng/directive/ngSrc
You can manage DOM and everything very easily. Please check that.
Related
I have an image in which I have to display text from the database using PHP, but when the page loads the text appears first and the image is displayed later, is there a way that I can make the image load first and text later?
Assuming the image isn't set initially, just give it a load handler, and when triggered, apply the text in question:
<span id="my-element" data-text="php-text-here">
img.addEventListener('load', () => {
const myElement = document.querySelector('#my-element');
myElement.textContent = myElement.getAttribute('data-text');
});
I have some code that will show a thumbnail preview of a file that a user chooses to upload. However, I want it to look more like this:
I am trying to accomplish a few things with this thumbnail part:
To show the thumbnail previews below the "Add File" button
To show the image as just a smaller image image, a file as a preset image of a file, and a video as the thumbnail for the video with the play symbol over it (see link above for examples)
To set a maximum of 5 possible files to be uploaded.
<script type="text/javascript">
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
1) To show the thumbnail previews below the "Add File" button
move your tag with id="imagePreview" bellow your file input
2) To show the image as just a smaller image image, a file as a preset image of a file, and a video as the thumbnail for the video with the play symbol over it (see link above for examples)
set css for your #imagePreview
ex: #imagePreview { width: 100px; height: 100px; }
3) you have no upload functionality provided, so ... no more than 1 field and preview in your code ... so how can i help you? generally - add a counter as global var and check it ... when it reaches 5 ... hide the file input
For my javascript application i need to take the screen shot of every page in my ipad presentations, anyway i found a solution for that using html2canvas. Now i'm able to convert the html page to image but how can i save that in my presentations image folder using javascript?
Here is my javascript
html2canvas(document.body,
{
onrendered: function(canvas)
{
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png"); //converting the canvas to image(PNG)
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the image
},logging:true,background: "#fff",
});
and here is my html
<div class="wrapper">
<div class="container">
<div class="test">
<img src="" id="image_test">
</div>
</div>
</div>
Can anybody help me how can i save the image having the id "image_test" in my presentations images folder?
Thanks in advance.
If you're saving the file on a server, you can link the user to the file page.
otherwise, you can link to a "fake" path, based on the data
e.g:
function download(data){
document.location = 'data:Application-octet-stream,'+
encodeURIComponent(data);
}
http://blogs.adobe.com/cantrell/archives/2012/01/how-to-download-data-as-a-file-from-javascript.html
I am trying to show the client an image which he has selected:
<input type="file" onchange="showImage(this)"/>
But I can't read the value of the input, as I checked out here. Is it possible to display the image?
In onchange I can send the form to server and server can send the data back, but is it really necessary? Can't the client display the data without the ping-pong to the server? Is it a security issue?
You can use FileReader web-api object for this, see this snippet:
the HTML
<input id="src" type="file"/> <!-- input you want to read from (src) -->
<img id="target"/> <!-- image you want to display it (target) -->
the javascript
function showImage(src,target) {
var fr=new FileReader();
// when image is loaded, set the src of the image where you want to display it
fr.onload = function(e) { target.src = this.result; };
src.addEventListener("change",function() {
// fill fr with image data
fr.readAsDataURL(src.files[0]);
});
}
var src = document.getElementById("src");
var target = document.getElementById("target");
showImage(src,target);
I have an input tag on a form for selecting images to upload.
<div id="lowresDemo">
<img src="some-url" />
</div>
<input type="file" id="FileToUpload" name="FileToUpload" />
I've attempted to change the a thumbnail displayed on the form next to the input to affirm to the user that their selection was the intended with the following jquery code:
$('#FileToUpload').change(function () {
$('#lowresDemo img').attr('src', $(this).val());
});
...this doesn't work in any browser, for browser security reasons I beleieve (as I remember from the last time I did something like this years ago).
QUESTION:
Is there a way to present the user's choice of image before they submit the form -- and not just the filepath+name of the value in the input field, but a thumbnail showing the file they've selected?
Or does modern browser security prevent this?
It's possible with the File API (IE does not support the File API)
<input type="file">
<script type="text/javascript">
$(document).ready(function() {
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});
});
</script>
Working example: http://jsfiddle.net/ugPDx/
There is no way to perform the operation before uploading the picture.
But think of it in a different way - the user "doesn' care" if the picture is already uploaded - you could show the thumbnail after they've uploaded, and show a confirm checkbox. Gmail does this with their email attachments - as soon as you selected the file to attach, the upload starts. But the user always has the option to uncheck the file, and it won't be included in the email.