web前端生成图片之 html2canvas demo

最新推荐文章于 2023-01-02 16:38:41 发布

lanlanmingyue

最新推荐文章于 2023-01-02 16:38:41 发布

阅读量375

点赞数

分类专栏： js 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/lanlanmingyue/article/details/120568749

版权

js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Using an existing canvas to draw on</title>
    <style>
        canvas {
            border: 1px solid black;
        }
        button {
            clear: both;
            display: block;
        }
        #content {
            background: rgba(100, 255, 255, 0.5);
            padding: 50px 10px;
        }
        #originContent{
            width:120px;
            background: rgba(63, 250, 30, 0.5);
            padding: 50px 10px;
        }
        #haiBao{
            width:100%;height: 600px;background-color:pink
        }
    </style>
</head>
<body>
    <div id="originContent">originContent</div>
    <div id="textBox">
        cehi
    </div>
    <button id="button2">生成海报</button>
    <div id="haiBao" ></div>
<div><h1>demo2: HTML content to render:</h1>
    <div id="content">Render the content in this element <strong>only</strong> onto the existing canvas element</div>
</div>
<h1>Existing canvas:</h1>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<button id="button1">Run html2canvas</button>
<script type="text/javascript">
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();

    document.getElementById("button1").addEventListener("click", function() {
        html2canvas(document.querySelector("#content"), {canvas: canvas, scale: 1}).then(function(canvas) {
            console.log('Drew on the existing canvas');
        });
    }, false);

    // 示例
    /*图片跨域及截图模糊处理*/
let shareContent = document.querySelector("#originContent");//需要截图的包裹的（原生的）DOM 对象
let $canvas;
let _scale,width,height;
width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
$canvas = document.createElement("canvas"), //创建一个canvas节点
_scale = 1; //定义任意放大倍数 支持小数
$canvas.width = width * _scale; //定义canvas 宽度 * 缩放
$canvas.height = height * _scale; //定义canvas高度 *缩放
$canvas.style.width = shareContent.clientWidth * _scale + "px";
$canvas.style.height = shareContent.clientHeight * _scale + "px";
$canvas.getContext("2d").scale(_scale, _scale); //获取context,设置scale

let renderBox = document.getElementById("haiBao")
let upDomHeight = shareContent.offsetHeight;//包裹盒子高度

renderBox.appendChild($canvas)
console.log('width',width,height,upDomHeight);

// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
let opts = {
    logging: false, //日志开关，便于查看html2canvas的内部执行流程
	scrollY: 0, 
	scrollX: 0,
	backgroundColor: null, //避免图片有白色边框
    scale: _scale, // 添加的scale 参数
    canvas: $canvas, //自定义 canvas
    useCORS: true // 【重要】开启跨域配置
};

let opts2 = { //
    logging: false, //日志开关，便于查看html2canvas的内部执行流程
    width:renderBox.clientWidth,//生成后的宽度,dom 原始宽度
	height:renderBox.clientHeight,//生成后的高度,dom 原始宽度
	// x:0,
	y:upDomHeight,//要生成的dom元素之上所有dom的高度
	scrollY: 0, 
	scrollX: 0,
	backgroundColor: null, //避免图片有白色边框
    scale: _scale, // 添加的scale 参数
    canvas: $canvas, //自定义 canvas
    useCORS: true // 【重要】开启跨域配置
}

document.getElementById("button2").addEventListener("click", function() {
        html2canvas(shareContent,opts).then(function(canvas) {
            console.log('Drew on the existing canvas');
            let dataURL = canvas.toDataURL("image/png");
        console.log(dataURL)
//         // this.imgUrl = dataURL;
//         // this.canvasDom=false;
        });
    }, false);

</script>
</body>
</html>

html2canvas - Screenshots with JavaScript官网

https://github.com/niklasvh/html2canvas github

lanlanmingyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端生成图片之 html2canvas demo

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Using an existing canvas to draw on</title> <style> canvas { border: 1px solid black; } button .
复制链接

扫一扫