基于html2canvas实现长按网页保存为图片到本地

JS 实现,基于 html2canvas 将 Html5 转换为图片并下载到本地,适用于微信公众号或H5页长按保存图片

下载 html2canvas.js 并引入,官网链接:https://www.bootcdn.cn/html2canvas/ 

利用 html2canvas.js 根据自己的需求生成截图,并且修复 html2canvas 截图模糊,以及绕过服务器图片保存至本地。

只需要短短的几行代码,就能根据所需的 dom 截图,是不是很方便,但是生成的图片模糊

直接选择要截图的 dom,就能截图,但是因为 canvas 的原因,生成的图片模糊

html2canvas(document.querySelector('div')).then(function(canvas) {
    document.body.appendChild(canvas);
})

图片模糊常见的解决方案是,生成一个多倍的画布,然后将其放在较小的容器内,这样就解决了截屏模糊的尴尬。

还有一个问题是怎么将图片绕过服务器保存至本地,canvas 有个 toDataURL 的方法,感,然后 a 标签有个 download 属性觉简直天造之和。

当然微信中屏蔽下载,可以借助微信的 webview 中的一个内置规则,只要是 a 标签(不含href属性)里面嵌套 Img 的,可以正常呼出保存至手机和分享给朋友的菜单栏。


坑,注意:保存图片截图截不到图像的问题解决

在回显图片后,给img标签动态的加上 crossOrigin="anonymous" 属性

然后:服务端开启跨域 response.setHeader("Access-Control-Allow-Origin","*");

并且开启CORS(重要);

前端等图片加载完后再截图(重要):userCORS记得开起来,很重要!!!

示例

以下是简单的 demo,直接复制本地运行就能看到效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>htmltopic</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<style>
*{margin: 0;}
.test {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #5fbaac;
    display: inline-block;
    vertical-align: top;
}
canvas {
    margin-right: 5px;
}
.down {
    float: left;
    margin: 40px 10px;
}
.down2 {
    float: left;
    margin: 40px 30px;
}
</style>
</head>
<body>
<div class="test">测试</div>
<div><a class="down" href="" download="downImg">下载</a></div>
<div><a class="down2" href="" download="downImg">下载2</a></div>
<div><img id="img" src=""></div>

<script>
//直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊
//html2canvas(document.querySelector('div')).then(function(canvas) {
//    document.body.appendChild(canvas);
//});
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('div');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求,对context的参数修改,translate指的是偏移量
//  var context = canvas.getContext("2d");
//  context.translate(0,0);
var context = canvas2.getContext("2d");
context.scale(2, 2);
html2canvas(document.querySelector('div'), {
    useCORS: true,
    canvas: canvas2
}).then(function(canvas) {
    //document.body.appendChild(canvas);
    //canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
    document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    $('#img).attr('src',canvas.toDataURL()); // 生成的图片
});
</script>

<script>
//这是另一种写法
$(function () {
    $(".down2").click(function () {
    html2canvas($(".test")).then(function (canvas) {
    var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
    window.location.href = imgUri; // 下载图片
    });
    //html2canvas($('.tongxingzheng_bg'), {
    //    onrendered: function (canvas) {
    //        var data = canvas.toDataURL("image/png");//生成的格式
    //        //data就是生成的base64码啦
    //        alert(data);
    //    }
    //});
    });
});
</script>
</body>
</html>


原文链接:HelloWeb前端网 » 基于html2canvas实现长按网页保存为图片到本地 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享