温馨提示:本文翻译自stackoverflow.com，查看原文请点击：jquery - HTML2Canvas not working, need to console image url

jquery html2canvas

jquery - HTML2Canvas无法正常工作，需要控制台图片网址

发布于 2020-03-27 12:01:32

我正在尝试对包含全日历的div的视图进行屏幕截图，但无法这样做。我尝试了以下代码：

  function screenshot(){
     alert('zz'); html2canvas(document.querySelector('#calendar')).then(function(canvas) {
        document.body.appendChild(canvas);
        console.log(canvas.toDataURL());
     });
    }

每当我单击屏幕截图时，我都想捕获的图像div#calendar并需要管理该URL，以便以后在社交媒体中共享此页面链接时可以将该图像用作缩略图。

您可以在Codepen上查看

提问者

Aayush Dahal

被浏览

19

查看英文版

查看原文

458 2019-07-04 13:18

您可以使用下面的函数使用html2canvas获取图像。

function screenshot(){
      console.log(html2canvas(document.querySelector('#calendar')))
      html2canvas(document.querySelector('#calendar'), {
      onrendered: function(canvas) {  
        var image = canvas.toDataURL("image/png");
        console.log("image => ",image); //image in base64
        var pHtml = "<img src="+image+" />";
        $("#parent").append(pHtml); //you can append image tag anywhere
        }
     });
 }

相关问题

1

如何启用和禁用selectmenu JQuery mobile

2

如何使用jQuery隐藏或显示Bootstrap 4崩溃

3

如何使用javascript减少实时日期/时间字符串？

4

HTML JS

5

在Javascript Jquery中调用PHP变量

6

如何根据jQuery中的行应用样式

7

使用HTML和JS通过URL访问XML文件

8

jQuery从click类获得不同的价值

9

我没有从表行的jQuery中通过ID获取特定值，它显示“未定义”

10

光滑的滑块

热门github

1

real time face swap and one-click video deepfake with only a single image

2

A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage

3

ChatGPT DAN, Jailbreaks prompt

4

21 Lessons, Get Started Building with Generative AI 🔗 https://microsoft.github.io/generative-ai-for-beginners/ (翻译：12 节课程，开始使用生成式 AI 进行构建)

5

Curated list of project-based tutorials (翻译：收藏了基于项目的教程列表)

6

Truly independent web browser

7

Python - 100天从新手到大师

8

An open source payments switch written in Rust to make payments fast, reliable and affordable (翻译：YOLOv8 🚀 in PyTorch > ONNX > CoreML > TFLite)

9

Agent S: an open agentic framework that uses computers like a human

10

Master programming by recreating your favorite technologies from scratch. (翻译：在这个项目中，你能学会如何创造自己的各种工具，引擎，游戏，框架，库......)

11

Jelly Evolution Simulator

12

Collection of leaked system prompts

13

🤯 Lobe Chat - an open-source, modern-design AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Ollama / DeepSeek / Qwen), Knowledge Base (file upload / knowledge management / RAG ), Multi-Modals (Plugins/Artifacts) and Thinking. One-click FREE deployment of your private ChatGPT/ Claude / DeepSeek application. (翻译：LobeChat 是开源的高性能聊天机器人框架，支持语音合成、多模态、可扩展的（Function Call）插件系统。)