将div转换为可下载的图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将div转换为可下载的图像相关的知识，希望对你有一定的参考价值。
这是我用来将div转换为图像并使用html2canvas.js下载的代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>
<style>
#download{
margin:10% 40%;
}
.download-btn{
padding:10px;
font-size:20px;
margin:0 20px;
}
#test{
background:#3399cc;
padding:50px;
}
.x2{
transform: scale(2,2);
}
</style>
<div id="download">
<h1 id="test">Testing Download</h1>
</div>
<center>
<button id="download-window" class="download-btn">New Window</button>
<button id="download-png" class="download-btn">Download png</button>
<button id="download-jpg" class="download-btn">Download jpg</button>
<button id="download-pngx2" class="download-btn">Download pngx2</button>
</center>
<script>
$('#download-window').click(function(){
html2canvas($('#download'),
{
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
window.open(img);
}
});
});
$('#download-png').click(function(){
html2canvas($('#download'),
{
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'image.png';
a.click();
}
});
});
$('#download-pngx2').click(function(){
$('#download').addClass('x2');
html2canvas($('#download'),
{
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'image.png';
a.click();
}
});
});
$('#download-jpg').click(function(){
html2canvas($('#download'),
{
onrendered: function (canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'image.jpg';
a.click();
}
});
});
</script>
这里生成的图像没有很好的分辨率。
有没有其他方法来生成具有良好分辨率的图像？
可以用php函数来完成这个任务吗？
这是一个简单的方法。
<div id="my-node">
You will get a image downloaded.
</div>
<button id="foo">download img</button>
<script>
var node = document.getElementById('my-node');
var btn = document.getElementById('foo');
btn.onclick = function() {
node.innerHTML = "I'm an image now."
domtoimage.toBlob(document.getElementById('my-node'))
.then(function(blob) {
window.saveAs(blob, 'my-node.png');
});
}
</script>
这是一个演示：this JSFiddle。
在这个小提琴中，使用了两个库：
dom-to-image：https://github.com/tsayen/dom-to-image
FileSaver.js：https://github.com/eligrey/FileSaver.js/
第一个用于将dom转换为图像，第二个用于下载图像。
更新：如果你想获得img的base64而不是仅仅下载img作为blob格式。你可以这样做：
domToImage
.toBlob(document.getElementById("my-node"))
.then(function(blob) {
saveBlobAsFile(blob, "XX.png");
});
// this function is to convert blob to base64 img
function saveBlobAsFile(blob, fileName) {
var reader = new FileReader();
reader.onloadend = function() {
var base64 = reader.result;
var img = document.createElement("img");
img.classList.add("me-img");
img.setAttribute("src", base64);
// insert the img to dom
document.getElementById("bar").appendChild(img);
};
reader.readAsDataURL(blob);
}
这里不需要FileSaver.js，我们使用html5 api FileReader来做这个伎俩。
我们在1M +日常用户的生产系统中使用的一个好方法是在服务器端完全执行此操作 - 生成浏览器（Chrome）;然后截取它的截图;然后将其流式传输到客户端。结果非常清晰/没有像素化 - 所有其他选项都变得非常像素化。
通过增加像素来提高分辨率
分辨率等于像素密度。如果你想要更高的分辨率，那么创建更多像素的尝试就是创建一个比例更大的宽度和高度的第二个画布，然后使用secondaryContext.scale和secondaryContext.drawImage(mainCanvas,0,0)将主画布内容放大并绘制到第二个画布上。例如，在打印机上使用此较大的画布。
这是一个以一些清晰度为代价增加像素密度的示例。您没有说明为什么需要更高分辨率，但此示例很有用，例如，如果您要将图像输出到打印机。注意：打印页面将比输入打印机的密度增加的图像更清晰，因为打印机以更高的密度打印（可能是300dpi打印机分辨率，而不是72 / 96ppi）。
var divX2=document.createElement('canvas');
divAt2X('#download',1.5);
$('#go').on('click',function(){
// save
var a = document.createElement('a');
a.href = divX2.toDataURL("image/png");
a.download = 'image.png';
a.click();
});
function divAt2X(id,upscale){
var w=$(id).width();
var h=$(id).height();
html2canvas($(id),{
onrendered:
function(canvasDiv){
// scale up
ctx=divX2.getContext('2d');
divX2.width=w*upscale;
divX2.height=h*upscale;
ctx.scale(upscale,upscale);
ctx.drawImage(canvasDiv,0,0);
}
}
);
} #download{
margin:10% 20%;
}
.download-btn{
padding:10px;
font-size:20px;
margin:0 20px;
}
#test{
background:#3399cc;
padding:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://html2canvas.hertzen.com/build/html2canvas.js'></script>
<button id='go'>Download 1.5X</button><span>(IE/Edge don't support download)</span>
<div id="download"><h1 id="test">Testing Download</h1></div>在HTML5中，有一个名为download的属性。例如：
<a href="link_to_the_file" download="">Download</a>以上是关于将div转换为可下载的图像的主要内容，如果未能解决你的问题，请参考以下文章