HTML Canvasを使用してBase64画像を描画する方法

方法1: drawImage()メソッドを使用する方法 Canvasのコンテキストを取得し、drawImage()メソッドを使用してBase64画像を描画します。

<!DOCTYPE html>
<html>
<head>
    <title>Base64画像の描画</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
        };
        image.src = 'data:image/png;base64,iVBORw0KG...'; // Base64画像のデータURLを指定
    </script>
</body>
</html>

方法2: createImage()メソッドを使用する方法新しいImageオブジェクトを作成し、src属性にBase64画像のデータURLを設定します。その後、Canvasのコンテキストを使用して画像を描画します。

<!DOCTYPE html>
<html>
<head>
    <title>Base64画像の描画</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.src = 'data:image/png;base64,iVBORw0KG...'; // Base64画像のデータURLを指定
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
        };
    </script>
</body>
</html>

方法3: toDataURL()メソッドを使用する方法 Base64形式の画像を含む新しいImageオブジェクトを作成し、toDataURL()メソッドを使用してデータURLを取得します。その後、同じデータURLを使用してCanvasに描画します。

<!DOCTYPE html>
<html>
<head>
    <title>Base64画像の描画</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.src = 'data:image/png;base64,iVBORw0KG...'; // Base64画像のデータURLを指定
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
        };
    </script>
</body>
</html>

これらの方法を使用すると、HTMLのCanvas要素を使用してBase64形式の画像を描画できます。ご希望の方法やコード例を試してみてください。