将图像从网站下载到桌面

Question

Can someone please explain to me. Why my this code is not working? I have changed my code over and over and its hard to explain what is not working. So i finally put it in my website so I can show you what is going on. Here is where i found the code: convert div to single image with canvas-javascript css I use this an example because I'm trying to do the same thing. I changed the images so you can see on my site https://torcdesign.com/mom.php

 var download = document.getElementById("download"), result = document.getElementById("result"); function renderContent() { html2canvas(document.getElementById("content"), { allowTaint: true }).then(function(canvas) { result.appendChild(canvas); download.style.display = "inline"; }); } function downloadImage() { download.href = result.children[0].toDataURL("image/png"); } document.getElementById("button").onclick = renderContent; download.onclick = downloadImage 

 <style> #content { position: absolute; width: 300px; height: 200px; border: 5px solid red; overflow: hidden; } #img1 { width: 300px; height: 200px; position: absolute; z-index: 5; } #img2 { position: absolute; z-index: 6; width: 150px; height: 190px; } #img3 { position: absolute; z-index: 7; width: 200px; height: 100px; } #download { display: none; } </style> 

 <script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script> <div id="content"> <img id="img1" src="https://torcdesign.com/shirts/brown.jpg"> <img id="img2" src="https://torcdesign.com/shirts/kiwi.jpg"> <img id="img3" src="https://torcdesign.com/shirts/lswhite.jpg"> </div> <br><br><br><br><br><br><br><br><br><br><br><br> <input id="button" type="button" value="convert div to image"><br> <h3>result:</h3> <div id="result"></div> <a id="download" download="my_image.png" href="#">Download image</a> 

Answer 1

After some digging, it looks like the issue is that your canvas is tainted, and you cannot export a tainted canvas. To make sure you canvas is not tainted, you cannot use cross-origin images. For example, I tried using a base-64 encoded image instead, and that one worked perfectly fine.