因此，我使用 HTML 2 画布来生成社交媒体图像。
\n我遇到的问题是它不包括 css 背景图像。
\n检查了有关堆栈溢出的其他帖子后，所有解决方案似乎都不起作用，该版本是最新的，即使使用相同的原始图像，这也不起作用。我错了什么？
\n\nfunction getCapture(){\n html2canvas(document.querySelector(".quote")).then(canvas => {\n \n var quote = document.querySelector(".quote");\n\n document.body.appendChild(canvas);\n\n var download = document.getElementById("download");\n var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");\n download.setAttribute("href", image);\n download.setAttribute("download","quote.png");\n\n download.click();\n\n });\n}\n\n$(function(){\n \n $(\'.generator [name="author"]\').keyup(function(){\n var author = $(this).val();\n $(\'.quote .text small\').html(\'\xe2\x9a\x8a \' + author);\n });\n \n $(\'.generator [name="quote"]\').keyup(function(){\n var quote = $(this).val();\n $(\'.quote .text p\').html(quote);\n });\n \n $(\'.generator [name="image"]\').on(\'change\', function(){\n \n var input = this;\n var url = $(this).val();\n var …我下载了html2canvas javascript插件,它允许我在客户端(浏览器)截取网页的截图,但我无法弄清楚我应该在页面的标题中包含哪些文件来使用它,我已经看过如何使用它的示例,但我应该包含哪些文件？
这是不起作用的代码.基本上我允许用户编辑div中的一些文本然后显示其截图.有人可以告诉它为什么不起作用？
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
</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>
<input id="submit" type="submit" value="SUBMIT" />
</div>
<script type="text/javascript">
window.onload = function() {
html2canvas( [ document.body ], {
onrendered: function( canvas ) {
document.body.appendChild( canvas );
}
});
};
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script …嗨我使用jsPdf制作HTML内容的pdf,它适用于短内容和创建pdf,但是当我尝试在大内容上使用html2canvas.js(用于渲染css)时,它不会创建pdf.任何建议或示例代码都会有所帮助.谢谢.
我正在开发codeigniter。我想将“保存到pdf”功能添加到div之一。我正在使用html2canvas进行打印。我的问题是我想在pdf的标题上添加徽标和一些其他信息，该信息在网页上不可见。我不知道该怎么做。下面是我的代码。
<script type='text/javascript' src="<?php echo site_url('assets/js/html2canvas.js'); ?>"></script>
<script type='text/javascript' src="<?php echo site_url('assets/js/jspdf.debug.js'); ?>"></script>
<script type='text/javascript'>//<![CDATA[
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#content')[0], function () {
pdf.save('test.pdf');
});
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 30,
bottom: 30,
left: 30,
width: '100%'
//color: '#000'
};
pdf.addHTML()(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width …我正在尝试在Angular2应用程序中实现打印功能。我碰到了这个包html2canvas。它看起来令人印象深刻，但是当我尝试将其包含在我的应用程序中时，会抛出一个错误。
这是我遵循的步骤
<script src="scripts/html2canvas.js"></script>declare var html2canvas: any;添加了要打印的代码（当用户单击“打印”按钮-测试代码时）
printview(): void {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
}
但是，一旦用户单击打印按钮，我就会收到以下错误
browser_adapter.ts:78 ReferenceError: html2canvas is not defined
任何帮助或提示将是有用的...
大家好我正在使用jsPDF以及html2canvas.我已经看到add.HTML你可以隐藏一些div.是否有可能在html2canvas中具备此功能.
我实际上正在制作一个pdf,但我想要一些主要div的div不要在pdf中打印.
这是我的html2canvas代码.
html2canvas(quotes, {
onrendered: function(canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF('p', 'pt', 'A4');
for (var i = 0; i <= quotes.clientHeight/980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 980*i; // start 980 pixels down for every new page
var sWidth = 900;
var sHeight = 980;
var dX = 0;
var dY = 0;
var dWidth = 900;
var …我在Angular 2中使用html2canvas捕获网页，但是我需要使用webapi帖子调用将字符串图像发送到服务器端
imageDownload() {
html2canvas(document.body).then(function (canvas) {
var imgData = canvas.toDataURL("image/png");
document.body.appendChild(canvas);
});
}
我无法从html2canvas访问此Typescript函数，如何访问此方法以将图像字符串发送到服务器端
AddImagesResource(image: any) {
this.imagesService.addCanvasResource(image)
.subscribe(response => {
this.eventsEmitter.broadcast('Success', 'Changes Saved Succesfully');
},
error => {
this.eventsEmitter.broadcast('Error', 'Error Occured');
});
}
我在下面的代码中包含一个HTML Tab和一个模式，下面是我使用该库HTML2Canvas捕获所选内容的过程divs。但是问题是当我单击下载时，它无法捕获下载文件中的图像。
它一直有这个错误 Access to Image at '//IMAGE LINK' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
我试图添加crossorigin：匿名到我的img，但仍然没有运气。有没有简单的方法来解决这个问题？任何帮助将不胜感激。
function sendData() {
$('#myModal2').addClass('modal-posit');
var modalButton = $('[data-target="#myModal2"]')[0];
modalButton.click();
var modal = $('#myModal2')[0];
setTimeout(function() {
html2canvas(document.getElementById('capture'), {
allowTaint: false,
useCORS: true
}).then(function(canvas) {
downloadCanvas(document.getElementById('test'), canvas, 'test.png');
modalButton.click();
});
}, 1000);
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = …是否可以清理受污染的帆布？
我有一个Openlayers地图,用户可以在其中添加具有CORS限制的图层.我不能通过我的代理配置绕过cors并且crossOrigin ='anonymus'不是一个选项.
我需要的是能够移除" 坏 "图层并让用户生成地图图像.
所以我试着:
但我总是得到cors错误.如何在不刷新浏览器的情况下再次使我的地图变得更好？
html2canvas ×10
javascript ×8
html ×4
jspdf ×3
angular ×2
css ×2
canvas ×1
codeigniter ×1
cors ×1
html5-canvas ×1
openlayers ×1
php ×1
screenshot ×1
typescript ×1