html2canvas screenshot an image

我发现这个代码需要一个窗体的截图。我正在尝试拍摄图片或视频的截图。有没有一种方法可以截取网页的一部分并将其保存为该代码保存表单的方式？html2canvas screenshot an image

这是我的HTML代码

<!doctype html> 
    <html> 
    <head> 
    <link type="text/css" rel="stylesheet" href="main.css" /> 
    <title>Poster</title> 
    <script type="text/javascript" src="html2canvas.js"></script> 
    <script type="text/javascript"> 
    var Submit = function() { 
    html2canvas(document.body, { 
    onrendered: function(canvas) { 
     document.body.appendChild(canvas); 
    } 
    }); 
    }; 
    </script> 
    </head> 
    <body> 
    <div id="main_image"> 
    <img src="image.jpg" id= "image"/> 
    <div id="user_text">IT IS TOTALLY AWESOME</div> 
    </div> 
    <div id="edit_text_box"> 
    <textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" > </textarea> 
    <div id="change_size"> 
    <span style="float: left;">FONT-SIZE : </span> 
    <button id="decrease_size">-</button> 
    <button id="increase_size">+</button> 
    </div> 
    <button onclick="Submit();" >Submit</button> 
    </div> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/edit_text.js"></script> 
    </body> 
    </html>

来源

2014-07-09 user3706227

您基本上想要将图像或视频放在画布内？ http://www.html5canvastutorials.com/tutorials/html5-canvas-images/ –

@JonasGrumann其实我试图截取一张图片而不是一张表格 – user3706227

为什么要拍一张图片的截图？为什么不使用图像本身？你能提供更多关于上下文和期望输出的信息吗？ –

从画布真正拍摄图像，并将其复制在另外一个你需要采取所有第一画布的imageData（一个与编辑视频）

var myImageData = context.getImageData(left, top, width, height);

，并把为imageData第二画布上：

targetContext.putImageData(myImageData, dx, dy);

并将其保存为一个图像：

var image = canvas.toDataURL();

之后，你将有一个字符串作为图像，可以用作html图像的src属性。

请注意，您正在问如何将某些内容复制到画布上，这是为什么我告诉您关于getImageData和putImageData的一些信息。如果您只需要原始图像当前状态的图像，则不需要第一步，只需使用canvas.toDataURL

来源

2014-07-09 10:02:14

html2canvas screenshot an image

回答

相关问题