用途
新着
履歴
分類


JavaScript 画像をcanvasに変換する

JavaScript 画像をcanvasに変換する
JavaScript 画像をcanvasに変換する
imgタグで呼び出した画像をcanvasに描画するサンプルです。描画の際にリサイズもします。

表示した画像をCanvasに描画します。

imgの元画像は600pxですが、CSSで200pxにしているので、canvasでも200pxに合わせてリサイズしています。

このサンプルは、jQueryも利用しています。

まず、普通にimgタグで画像を表示します。

<img src="/img/demo/hand/001.jpg" id="demo_image">

次にcanvasタグを埋め込み、読み込んだ画像を描画します。

<canvas id="myCanvas" width="200" height="134"></canvas>

見た目は全く同じ二つの画像ですが、描画方法が違います。

canvasで描画するといろいろな加工が可能になります。

JSの記述はこちら

    //画像を分析するので読み込んでから発火
    //$(function(){ にはしない
    $(window).load(function(){
        var $img = $('#demo_image');
        var imgW = $img.width();
        var imgH = $img.height();

        //取得した画像サイズのcanvasを追加
        $("#demo_space").append('<canvas id="myCanvas" width="'+imgW+'" height="'+imgH+'"></canvas>');
    
        //キャンパスに描画するためのコンテキストを用意する
        var canvas = document.getElementById('myCanvas'),
            ctx = canvas.getContext('2d');
    
        //取得した画像を新しいオブジェクトとして生成する
        var image = new Image();
        image.src = $img.attr("src");
    
        // 描画する
        // drawImage(image.src,開始X,開始Y,終点X,終点Y,リサイズ開始X,リサイズ開始Y,リサイズ終点X,リサイズ終点Y)
        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, imgW, imgH);
        // 元画像のサイズのまま描画する場合、ctx.drawImage(image, 0, 0)でよい
    });

HTMLはこちら

<img src="/img/demo/hand/001.jpg" id="demo_image">

<div id="demo_space"></div>

応用は別記事にて紹介します。

公開 2020-09-13 14:10:15
更新 2020-09-13 14:56:00
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2020 kipure
Top