Replacing html2canvas with html-to-image

[fatih0057]

I want to replace this code that takes time to send to thermal printer with html-to-image Also sorry for my english.

print.js

    html2canvas(document.querySelector("#")).then(canvas => {
        var b64Image = canvas.toDataURL("image/png");

[vivcat[bot]]

👋 @fatih0057

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[vivcat[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[simpleneeraj]

Hii you want to replace html2canvas to html-to-image

OKAY Now here i ready a code for you i used React.js from this example this is basic template to replace

FROM Your Code

  html2canvas(document.querySelector("#")).then(canvas => {
    var b64Image = canvas.toDataURL("image/png");
  }

TO My Code

This code for html-to-image

const element = document.querySelector("#element");
const canvas = await htmlToImage.toCanvas(element);
console.log(canvas);

A Proper Way to implement

const GetPngImage = async () => {
  const element = document.querySelector("#element");
  try {
    const png = await htmlToImage.toPng(element);
    console.log(png);
    return png;
  } catch (e) {
    console.log(e);
  }
};

Want to Get HD image

use pixelRatio for this

const GetPngImage = async () => {
  const element = document.querySelector("#element");
  try {
    const pnghd = await htmlToImage.toPng(element, {
      pixelRatio: 4,
    });
    console.log(pnghd);
    return pnghd;
  } catch (e) {
    console.log(e);
  }
};

For Typescript users

const GetPngImage = async () => {
  const element = document.querySelector("#element");
  try {
    const png: HTMLCanvasElement = await htmlToImage.toPng(element, {
      pixelRatio: 4,
    });
    console.log(png);
    return png;
  } catch (e) {
    console.log(e);
  }
};

You can use toPng toJpeg toBlob toCanvas

[fatih0057]

Merhaba, değiştirmek html2canvasistediğinizhtml-to-image

TAMAM Şimdi burada sizin için bir kod hazırlıyorum, bu örnekten React.js kullandım, bu değiştirilecek temel şablon

Kodunuzdan

  html2canvas ( belge . querySelector ( "#" ) ) . sonra ( tuval  =>  { 
    var  b64Image  =  tuval . toDataURL ( "image/png" ) ; 
  }

Koduma

Bu kod içinhtml-to-image

const  öğesi  =  belge . sorguSeçici ( "#element" ) ; 
const  canvas  =  htmlToImage'ı  bekleyin . toCanvas ( eleman ) ; 
konsol . günlük ( tuval ) ;

Uygulamanın Uygun Bir Yolu

const  GetPngImage  = zaman  uyumsuz  ( )  =>  { 
  const  öğe  =  belge . sorguSeçici ( "#element" ) ; 
  deneyin  { 
    const  png  =  htmlToImage'ı  bekleyin . toPng ( eleman ) ; 
    konsol . günlük ( png ) ; 
    png'ye dönüş  ; } catch ( e ) { konsol . günlüğe kaydet ( e )

    ;
  }
};

HD görüntü elde etmek istiyorum

pixelRatiobunun için kullan

const  GetPngImage  = zaman  uyumsuz  ( )  =>  { 
  const  öğe  =  belge . sorguSeçici ( "#element" ) ; 
  deneyin  { 
    const  pnghd  =  htmlToImage'ı  bekleyin . toPng ( eleman ,  { 
      pixelRatio : 4 , 
    } ) ; 
    konsol . günlük ( pnghd ) ; 
    dönüş  pnghd ; 
  }  yakalamak  ( e)  { 
    konsol . günlük ( e ) ; 
  } 
} ;

TypeScript kullanıcıları için

const  GetPngImage  = zaman  uyumsuz  ( )  =>  { 
  const  öğe  =  belge . sorguSeçici ( "#element" ) ; 
  { const png : HTMLCanvasElement  = htmlToImage'ı bekleyin . _ toPng ( eleman , { pixelRatio : 4 , } ) ; konsol . günlük ( png ) ; png'ye dönüş ; }

   catch  ( e )  { 
    konsol . günlük ( e ) ; 
  } 
} ;

KullanabilirsiniztoPng toJpeg toBlob toCanvas

endless thanks I wish you a long life

[vivcat[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[vivcat[bot]]

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯

[vivcat[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.