网站在某些浏览器中有效,但并非全部
website works in some browsers but not all
为什么我的网站可以在我的 phone 上运行,但不能在我的计算机上运行 我尝试了所有 IE chrome Fire fox 并且我似乎无法从 div 下载图像但是当我使用我的 phone 它工作正常(仅限 chome)。怎么了?这是我的网站 https://torcdesign.com/mom 谁能帮我找到一个解决方案让它在所有浏览器中都能正常工作
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"; download.href = result.children[0].toDataURL();
});
}
function downloadImage() {
}
document.getElementById("button").onclick = renderContent;
download.onclick = downloadImage
#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;
}
<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>
我认为您可能需要更新大部分浏览器。根据 this reference a
标签的 download
属性被不同浏览器的不同版本所支持。
为什么我的网站可以在我的 phone 上运行,但不能在我的计算机上运行 我尝试了所有 IE chrome Fire fox 并且我似乎无法从 div 下载图像但是当我使用我的 phone 它工作正常(仅限 chome)。怎么了?这是我的网站 https://torcdesign.com/mom 谁能帮我找到一个解决方案让它在所有浏览器中都能正常工作
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"; download.href = result.children[0].toDataURL();
});
}
function downloadImage() {
}
document.getElementById("button").onclick = renderContent;
download.onclick = downloadImage
#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;
}
<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>
我认为您可能需要更新大部分浏览器。根据 this reference a
标签的 download
属性被不同浏览器的不同版本所支持。