How to save div as image on click?
I would like to know how I can save my div into an image on click with an unique name.
I used to save the image on right-click but that no longer works and it's hard for the user to do.
I want to do something easier let's say that you clicked preview image and the image is previewed, which got an unique name that is automatically put in the image upload box.
I don't want it to download into my files and retrieve it and upload the image manually.
If you have further question please feel free to ask thank you.
$(function() {
var element = $("#firstshirt"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function() {
html2canvas(element, {
allowTaint: true,
logging: true,
onrendered: function(canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstshirt" class="container" style="float:left;">
<center>
<div id="wrapper">
<div id="boxes" class="container5" style="float:center;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center><span id="texter" class="text" data-bind="text:$data"></span>
<input class="edit_text" />
</center>
</div>
</div>
<a href="" download><span id="image" class="preview-area"></span></a>
</div>
</div>
</center>
<br><br><br><br>
</div>
<input id="btn-Preview-Image" type="button" value="Preview" />
<p>
<label form="file">Upload Downloaded Image:</label>
<input type="file" name="file3" id="file3" required formvalidate>
</p>If I understand your question you want the user to be able to see the image before uploading. If so try using FileReader which doesn't required any thing but jQuery.
$("#images").change(function() {
// clear div (encase preview already exist)
$(".gallery").empty();
// get all the image
var images = $("#images").prop('files');
// loop through the images and display with FileReader
$(images).each(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
var $img = $("<img/>").attr('src', e.target.result); // creates the image
$(".gallery").append($img); // adds the image to the div
};
reader.readAsDataURL(this); // passes the file data to reader
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label for="images">Image Upload:</label>
<input type="file" id="images" name="images" multiple>
</p>
<div class="gallery"></div>$("#btnSave").click(function() {
html2canvas($("#firstshirt"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#previewImage").append(canvas);
}
});
});
check this fiddle : https://jsfiddle.net/8ypxW/3/
-
05:30
-
04:00
-
00:00
-
10:30
-
9:10
-
07:40
Firebase Cloud Functions: PubSub, "res.on is not a function"
-
04:00
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
-
9:20
-
7:40
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 111533 visits
- search for elements in a list 111064 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98826 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 96332 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 92527 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 62041 visits
- Adding methods to es6 child class 22375 visits
