将图像从网站下载到桌面 [英] downloading image from website to desktop
问题描述
有人可以向我解释。为什么我的代码不工作?我已经改变了我的代码一遍又一遍,很难解释什么是不工作。所以我终于把它放在我的网站,所以我可以告诉你发生了什么。这里是我找到的代码:将div转换为单一图像canvas-javascript css 我使用这个例子,因为我想做同样的事情。我更改了图片,以便您可以在我的网站上查看 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; onclick = downloadImage
< style> #content {position:绝对; 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;}#下载{display:none;}< / style>
< script src =https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js>< / script>< div id =content> ; < img id =img1src =https://torcdesign.com/shirts/brown.jpg> < img id =img2src =https://torcdesign.com/shirts/kiwi.jpg> < img id =img3src =https://torcdesign.com/shirts/lswhite.jpg> < / div>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br> ; br>< input id =buttontype =buttonvalue =convert div to image>< br>< h3> result:< / h3>< div id =result> ;< / div>< a id =downloaddownload =my_image.pnghref =#>下载图片< / a>
div>
经过一番挖掘,看起来问题是你的画布是污点,导出一个污点画布。要确保画布不被污染,您不能使用跨原点图像。例如,我尝试使用base-64编码图像,而且那个工作完全正常。
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>
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.
这篇关于将图像从网站下载到桌面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!