<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="utf-8">
<title>文章分享</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
**/* 官网下载html2canvas.min.js(转成图片) canvas2Image.js(保存图片) 两个js */**
<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/canvas2Image.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.layui-layer-content img{width: 300px;height: 500px;}
.layui-layer-content{background-image: url('https://img04.sogoucdn.com/app/a/100520024/ec675e77fb476e2987d611f935a1f90f');background-size: 100% 100%;}
</style>
</head>
<body>
<div style="width: 300px;height: 500px;" class="layui-layer-content"></div>
<h2 class="share"> <a href="javascript:void(0);"> 点击转成canvas </a></h2>
<button id="save">保存</button>
</body>
<script type="text/javascript">
var test = $(".layui-layer-content").get(0); //将jQuery对象转换为dom对象
// 点击转成canvas
$('.share').click(function(e) {
// $(".layui-layer-content").css({"background-image":"url('https://img04.sogoucdn.com/app/a/100520024/ec675e77fb476e2987d611f935a1f90f')","background-size":"100% 100%"});
var opts = { //初始化对象
useCORS: true **//开启html2canvas的useCORS配置,跨域配置,以解决图片跨域的问题 服务器也得配置允许跨域请求 本地图片不存在跨域**
};
// 调用html2canvas插件
setTimeout(function(){
html2canvas(test,opts).then(function(canvas) {
// canvas宽度
var canvasWidth = canvas.width;
// canvas高度
var canvasHeight = canvas.height;
// 渲染canvas
// $('.share').after(canvas);
// 调用转成图片方法
setTimeout(function(){
var img = convertToImage(canvas, canvasWidth, canvasHeight);
},500);
//保存
// $("#save").click(function(){
// saveAsImage(canvas, canvasWidth, canvasHeight);
// })
});
},500)
});
function convertToImage (canvas, canvasWidth, canvasHeight) { //转成图片格式
// 调用Canvas2Image插件
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
// 渲染图片
$(".layui-layer-content").html(img);
}
function saveAsImage (canvas, w, h, type, f) { //保存图片
// 调用Canvas2Image插件
Canvas2Image.saveAsImage(canvas, w, h);
}
</script>
</html>
html2Canvas官网: [http://html2canvas.hertzen.com/]
文章截图(html2Canvas)保存分享转发
最新推荐文章于 2024-06-12 17:01:21 发布