i cant seem to download html2canvas to my desktop when their are other images in div why cant i download html2canvas image with other images?
if you have trouble undestanding what i just said please visit this page to test it out also feel free to ask more questions thank you. https://torcdesign.com/sis/ i keep getting this error (Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.)
var download = document.getElementById("download"),
result = document.getElementById("previewImage");
function renderContent() {
html2canvas(document.getElementById("firstshirt"), {
allowTaint: true
}).then(function(canvas) {
result.appendChild(canvas);
download.style.display = "inline"; download.href = result.children[0].toDataURL();
});
}
function downloadImage() {
}
document.getElementById("btn-Preview-Image").onclick = renderContent;
download.onclick = downloadImageHere is the answer...
Just copy and past it..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="https://files.codepedia.info/uploads/iScripts/html2canvas.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"></div>
</div>
<img id="img1" src="https://torcdesign.com/shirts/brown.jpg">
<img id="output" class="out-put-img" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px">
<a href="" download><span id="image" class="preview-area"></span></a>
<div id="fotos" >
<img class="modal-content" id="imgdisplay" />
</div>
</div>
</div>
</center>
<br><br><br><br>
</div>
<div style='display:none;' id="mtsm">
<div class="colore black active" data-image="https://torcdesign.com/shirts/black.jpg"></div>
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="download" download="my_image.png" href="#">Download image</a>
<select id="imajes">
<option value="">Choose Image</option>
<option value="new-upload">Upload Image</option>
<option value="dog">Dog</option>
</select>
<div class="file-upload-wrapper">
<input type="file" class="upload-img" name="upload-new-img" id="upload-img" />
<!--<img id="output" height="80px" width="80px">-->
</div>
<script>
// External added
jQuery(download).ready(function () {
jQuery(".file-upload-wrapper").hide();
jQuery(".out-put-img").hide();
jQuery("#imajes").change(function () {
var selected = jQuery('#imajes').val();
if (selected == "new-upload") {
jQuery(".file-upload-wrapper").show();
} else {
jQuery(".file-upload-wrapper").hide();
}
});
//File
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery(".out-put-img").show();
$('#output').attr('src', e.target.result);
// / $('.append-img').append('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery("#upload-img").change(function () {
readURL(this);
});
});
</script>
<select id="dog" name="subselector" class="subselector" style="display:none">
<option value="">Choose an item</option>
<option value="bulldog">Bulldog</option>
</select>
<div style='display:none;' id="bulldogimges" class="smallimages">
<div class="imgcontainerss" data-image="https://torcdesign.com/clipart/pT78gE6pc.gif">
<img src="https://torcdesign.com/clipart/pT78gE6pc.gif" alt="Smiley face" width="55" height="55">
</div>
<div class="imgcontainerss" data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif">
<img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" alt="Smiley face" width="55" height="55">
</div>
</div>
<h3>result:</h3>
<div>
<div id="previewImage"></div>
</div>
<script>
var download = document.getElementById("download"),
result = document.getElementById("previewImage");
function renderContent() {
html2canvas(document.getElementById("firstshirt"), {
allowTaint: true
}).then(function (canvas) {
result.appendChild(canvas);
download.style.display = "inline";
download.href = result.children[0].toDataURL();
});
}
function downloadImage() {
}
document.getElementById("btn-Preview-Image").onclick = renderContent;
download.onclick = downloadImage
$(document).ready(function () {
$('#imajes').change(function () {
$('.subselector').hide();
$('.smallimages').hide();
$('#' + $(this).val()).show();
});
$('.smallimages').hide();
var id = $(this).attr('id');
var val = $(this).val();
$('#dog').on('change', function () {
$("#bulldogimges").css('display', (this.value == 'bulldog') ? 'block' : 'none');
});
$('img').on('click', function () {
$('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>');
$('.imgdrag').draggable();
$('#fotos').droppable();
$('.modal-content').resizable();
});
});
</script>
<style>
.container {background-color: transparent;
width: 300px;
height: 300px;
border: 2px solid;
position: relative;
overflow: hidden;
/* Will stretch to specified width/height */
background-size: 490px 500px;
background-repeat: no-repeat;
}
</style>
I hope its helpful to you..