标签: html2canvas

Html2Canvas调整大小

我正在使用html2canvas来获取网页的屏幕截图并将其渲染为缩略图(好吧,400x300,不完全是缩略图).

基于截图控制台代码,除缩略图部分外,一切都很好.

如何将图像大小设置为400x300？在firebug中,我将属性定位为:<canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas>.但是,我无法弄清楚我的代码(下面)或html2canvas.js在哪里硬编码400x300参数.

screenshot.html:

<html>
<head> 
<title>Screenshot</title> 
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]--> 
</head> 
<body> 
<div class=container> </div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script type="text/javascript" src="js/html2canvas.js"></script> 
<script type="text/javascript">
var date=new Date();
var message,timeoutTimer,timer;
var proxyUrl="http://html2canvas.appspot.com";
function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#content").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()/2).height($(window).height()/2);$("#content").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#content").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"'  />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});
</script> 

<form class="well form-search"> 
<label for=url>Website URL:</label> 
<input type=url id=url value="http://www.yahoo.com" class="input-medium search-query"/>
<button class=btn id=getscreenshot>Get screenshot!</button> 
</form> 

 <div id=content></div> …

Run Code Online (Sandbox Code Playgroud)

html javascript screenshot canvas html2canvas

Chr*_*ris

lucky-day

6
推荐指数

2
解决办法

3万
查看次数

为什么没有定义html2canvas？

如果我正在调用此函数,则始终"未定义html2canvas".

makeScreenshot: function(button)
{
    debugger;
    html2canvas(document.body, {
        Uncaught ReferenceError: html2canvas is not defined
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        }
    });
},

Run Code Online (Sandbox Code Playgroud)

但为什么？我有一类它...就像在教程中写的那样.有没有人有办法解决吗？

我想我需要在这里包含html2canvas,但我不知道如何.

Ext.define("TEST.controller.Desktop", {
    extend: "Ext.app.Controller",

    views: [
        "desktop.Desktop",
        //"desktop.TaskBar",
        "desktop.Toolbar",
        "desktop.DataprovidersDataView",
        "configuration.UploadFileWindow"
    ],

refs: [{
    ref: "viewport",
    selector: "viewport"
}, {

Run Code Online (Sandbox Code Playgroud)

javascript extjs extjs4 html2canvas

r.r*_*r.r

2013 08-14

6
推荐指数

1
解决办法

2万
查看次数

TypeScript和Html2Canvas？

有没有人知道是否有可用于Html2Canvas库的TypeScript定义文件(d.ts)？

Html2Canvas是一个很棒的库,可以使用JavaScript获取浏览器的屏幕截图.有关详细信息,请参阅https://github.com/niklasvh/html2canvas.

javascript html2canvas typescript

RWH*_*urn

lucky-day

6
推荐指数

2
解决办法

1687
查看次数

在toDataURL之前缩放图像 - html2canvas

在你告诉我这是一个重复的问题之前,请知道我已经搜索过每一个相似的问题,其中任何答案都没有为我工作.

我使用html2canvas来获取div的快照,我需要做的是将其扩展到750x1050,然后再保存到png via canvas.toDataURL().

我得到的最接近的是以下代码.

html2canvas(document.getElementById('div_id'), {
   onrendered: function(canvas) {

      var extra_canvas = document.createElement("canvas");

        extra_canvas.setAttribute('width', 750);
        extra_canvas.setAttribute('height', 1050);

        var ctx = extra_canvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, 750, 1050);
        var dataURL = extra_canvas.toDataURL();

        window.open(dataURL);
   }
});

Run Code Online (Sandbox Code Playgroud)

图像大小合适,但图像中的文字质量极差,就像它在成为png 后调整大小一样.

是我做错了什么还是你不能这样放大？

任何建议/解决方案将不胜感激!

html javascript css resize html2canvas

sha*_*ons

lucky-day

6
推荐指数

2
解决办法

3万
查看次数

html2canvas截图捕捉当前窗口,而不是整个身体

试图在javascript中捕获整个页面的屏幕截图(包括用户填写的字段),但是html2canvas只捕获当前窗口,即使我将高度设置为一个巨大的数字.html2canvas网站示例似乎具有我想要的功能,但我无法理解他们在做什么不同.

<button id="pdfbutton" type="button">Click Me!</button>

<script type="text/javascript">
$( "#pdfbutton" ).click(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            // document.body.appendChild(canvas);
            var img = canvas.toDataURL("image/png");
            console.log(img);
            document.body.appendChild(canvas);

        }
        // height: 10000
    });
});
</script>

Run Code Online (Sandbox Code Playgroud)

如果有任何其他方法可以捕获javascript按钮上的屏幕截图(请不要插入URL,因为用户填写了我的页面上的字段),请告诉我.

javascript screenshot html2canvas

use*_*795

2015 04-26

6
推荐指数

1
解决办法

5689
查看次数

html2canvas javascript截图和上传

是否可以使用html2canvas(This)拍摄用户屏幕的图片,还可以上传图片,获取上传链接并将其与ajax一起发送到网络服务器？

如果是的话,我该怎么做？

javascript jquery canvas image-uploading html2canvas

mar*_*ria

2015 05-01

6
推荐指数

1
解决办法

1万
查看次数

使用html2canvas和jsPDF来保存页面的PDF

我想从div的内容创建一个PDF.我正在使用jsPDF.问题是没有我的样式被传递,因此PDF看起来.然后我看到一篇文章使用html2canvas来截取页面.

当我尝试提供的示例时,它给了我这个错误:

uncaught exception: Invalid orientation: [object object] <unknown>

Run Code Online (Sandbox Code Playgroud)

我该如何解决这个问题？

这是我正在使用的JS:

(function(){
var content = $('#content'),
    cache_width = content.width(),
    a4  =[ 595.28,  841.89];  // for a4 size paper width and height

$('#pdf').on('click',function(){
    $('body').scrollTop(0);
    createPDF();
});
//create pdf
function createPDF(){
    getCanvas().then(function(canvas){
        var 
        img = canvas.toDataURL("image/png"),
        doc = new jsPDF({
          unit:'px', 
          format:'a4'
        });     
        doc.addImage(img, 'JPEG', 20, 20);
        doc.save("{{this.['Student Last Name']}}-{{this.['Student Name']}}-umpire-incident-report.pdf");
        content.width(cache_width);
    });
}

// create canvas object
function getCanvas(){
    content.width((a4[0]*1.33333) -80).css('max-width','none');
    return html2canvas(content,{
        imageTimeout:2000,
        removeContainer:true …

Run Code Online (Sandbox Code Playgroud)

javascript html2canvas jspdf

L84*_*L84

lucky-day

6
推荐指数

1
解决办法

3777
查看次数

从外部网站截取屏幕截图

我正在开发一个初始页面,用户可以使用公式来添加页面链接.他们可以添加名称,网址,说明和上传图片.

我想自动上传图像的过程,应该自动捕获图像.我的脚本应该截取用户在网址中输入的网站的屏幕截图.我知道我可以使用html2canvas截取html元素的截图.

方法1

我的第一种方法是将外部网站加载到iframe,但这不起作用,因为有些页面限制了这一点,例如甚至w3schools.com上的iframe教程都不起作用我得到了Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

HTML

<div id="capture" style="padding: 10px; color: black;">
    <iframe src="https://www.w3schools.com"></iframe>
</div>

Run Code Online (Sandbox Code Playgroud)

方法2

我的下一个方法是打电话给我的网络服务器,它加载目标网站并将html返回给客户端.这样可行,但目标站点未正确呈现,例如图像未加载.(见下面的截图)

HTML

<div id="capture" style="padding: 10px; color: black;"></div>

Run Code Online (Sandbox Code Playgroud)

var testURL = "http://www.google.de";

$.ajax({
    url: "http://server/ajax.php",
    method: "POST",
    data: { url: testURL},
    success: function(response) {

       $("#capture").html(response);
       console.log(response);

        html2canvas(document.querySelector("#capture")).then(
            canvas => {
                document.body.appendChild(canvas);
            }
        );
   }
});

Run Code Online (Sandbox Code Playgroud)

PHP

if …

Run Code Online (Sandbox Code Playgroud)

javascript php jquery curl html2canvas

Bla*_*ack

2018 05-07

6
推荐指数

1
解决办法

1800
查看次数

如何在angular 4中使用addHTML

我正在尝试在angular中使用jspdf库的addHTML函数，并且已经安装了html2Canvas，但是出现了错误。

这是我的demo.component.ts文件。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as html2canvas from "html2canvas";

@Component({
 selector: 'app-demo',
 templateUrl: './demo.component.html',
 styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
@ViewChild('content') content:ElementRef;

constructor() { }

ngOnInit() {}

download() {
console.log("vijay")
let doc = new jsPDF('p','pt','a4');

let specialElementHandlers = {
  '#editor': function (element, renderer) {
      return true;
  }
};


let content  = this.content.nativeElement.innerHTML;

// doc.fromHTML( content, 15, 15, {
//   'width': 200,
//   'elementHandlers': …

Run Code Online (Sandbox Code Playgroud)

html html2canvas jspdf angular

Vij*_*rma

lucky-day

6
推荐指数

1
解决办法

1111
查看次数

无法安装jspdf 1.5.3

我需要将html转换为pdf，而我正在使用jspdf 1.5.2。它显示错误“无法读取未定义的属性'charAt'（与html2canvas一起使用）。

当我尝试安装jspdf 1.5.3时，我得到了：

npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/eligrey/FileSaver.js.git
npm ERR! enoent 
npm ERR! enoent 
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Run Code Online (Sandbox Code Playgroud)

我已经阅读了其他主题，但没有一个对您有帮助。

javascript npm html2canvas jspdf reactjs

Abd*_*had

2019 07-15

6
推荐指数

2
解决办法

1927
查看次数