BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] imgタグの付いたdivを画像に変換する方法

2022-01-29 11:46:56

質問

いくつかのimgタグを含むdivをpngに変換しようとしています。検索してみたところ、html2canvasライブラリを使用するのが一番良いようです。

問題は、それが私のために動作していないことであり、私は理由を理解していない。 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
        <script src="lib/js/Blob.js"></script>
        <script src="lib/js/canvas-to-blob.min.js"></script>
        <script src="lib/js/FileSaver.js"></script>
        <script src="lib/js/html2canvas.js"></script>
        <script src="lib/js/jquery.min.js"></script>
        <script src="lib/js/underscore-min.js"></script>
        <title>Tests Only</title>
    </head>
    <body>
        <div id="navigationButtons">
        </div>

        <div id="sourceScreen" style="width:200px">
            <img id="lol" src="tier-icons/base_icons/bronze.png" />
        </div>

        <div id="targetScreen">
        </div>

        <script = "text/javascript">
        jQuery('#navigationButtons').append('<button type="button" id="makeScreenshot">Screenshot</button>');
        jQuery('#makeScreenshot').click(makeScreenshot);

        function makeScreenshot(){
          html2canvas(jQuery('#sourceScreen'), {
            onrendered: function(canvas) {
              jQuery('#targetScreen').html(canvas);
            }
          });
        }
        </script>
    </body>
</html>

以下は、私のコードのjsFiddleです。 https://jsfiddle.net/2vv79ehy/1/

この例では、まず1つのimgタグで動作させようとしています。目標は、実際の画像の下にキャンバスを表示することです。 私はこのライブラリのクロスドメインリソースの問題があることを知っているが、私の実際のコードでテストを行うとき、画像は私のコンピュータでホストされています。

どなたか方法をご存知の方、または他の方法があれば教えてください（クロスドメインの問題も回避できれば最高です）。

解決方法は？

あなたのJSFiddleは、クロスドメインの問題を除いては、動作します。この問題を素早く回避する方法を探してみましたが、私が思いついた最善の方法は、あなたが onrendered また、位置決めもあまり弄っていませんし、Zオーダーもこの方法では無理でしょう。 makeScreenshot 関数は、あなたに合った解決策を見つけるのに役立ちます。 

function makeScreenshot(){
  html2canvas(jQuery('#sourceScreen'), {
    onrendered: function(canvas) {
      var img = jQuery("#cat");
      var ctx = canvas.getContext("2d");
      var originalPosition = { left: 0, top: 18 };
      ctx.drawImage(img[0],originalPosition.left,originalPosition.top);
      jQuery('#targetScreen').html(canvas);
    }
  });
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します