web-dev-qa-db-ja.com

canvas要素から画像を取得し、img srcタグで使用できますか？

キャンバス要素にある画像を_img src_で表される画像に変換する可能性はありますか？

何らかの変換後に画像をトリミングして保存するために必要です。 FileReader()またはToBlop()、toDataURL()、getImageData()のようなビュー関数がインターネット上で見つかりましたが、わかりません。 JavaScriptで適切に実装および使用する方法。

これは私のHTMLです：

_<img src="http://picture.jpg" id="picture" style="display:none"/>
<tr>
    <td>
        <canvas id="transform_image"></canvas>
    </td>
</tr>
<tr>
    <td>
        <div id="image_for_crop">image from canvas</div>
    </td>
</tr>
_

JavaScriptでは、次のようになります。

_$(document).ready(function() {
    img = document.getElementById('picture');
    canvas = document.getElementById('transform_image');

    if(!canvas || !canvas.getContext){
        canvas.parentNode.removeChild(canvas);
    } else {
        img.style.position = 'absolute';
    }
    transformImg(90);
    ShowImg(imgFile);
}

function transformImg(degree) {
    if (document.getElementById('transform_image')) {
        var Context = canvas.getContext('2d');
        var cx = 0, cy = 0;
        var picture = $('#picture');
        var displayedImg = {
            width: picture.width(),
            height: picture.height()
        };   
        var cw = displayedImg.width, ch = displayedImg.height
        Context.rotate(degree * Math.PI / 180);
        Context.drawImage(img, cx, cy, cw, ch);
    }
}

function showImg(imgFile) {
    if (!imgFile.type.match(/image.*/))
    return;

    var img = document.createElement("img"); // creat img object
    img.id = "pic"; //I need set some id
    img.src = imgFile; // my picture representing by src
    document.getElementById('image_for_crop').appendChild(img); //my image for crop
}
_

このスクリプトでキャンバス要素を_img src_イメージに変更するにはどうすればよいですか？ （このスクリプトにはいくつかのバグがある可能性があります。）

javascripthtml5imagecanvas
60
kassprek

canvas.toDataURL()は、ソースとして使用できる data url を提供します。

_var image = new Image();
image.id = "pic"
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);
_

こちらもご覧ください：

77
Zeta

これを行う。 bodyタグを閉じる直前に、これをドキュメントの下部に追加します。

<script>
    function canvasToImg() {
      var canvas = document.getElementById("yourCanvasID");
      var ctx=canvas.getContext("2d");
      //draw a red box
      ctx.fillStyle="#FF0000";
      ctx.fillRect(10,10,30,30);

      var url = canvas.toDataURL();

      var newImg = document.createElement("img"); // create img tag
      newImg.src = url;
      document.body.appendChild(newImg); // add to end of your document
    }

    canvasToImg(); //execute the function
</script>

もちろん、ドキュメントのどこかに、取得するキャンバスタグが必要です。

<canvas id="yourCanvasID" />
7
honkskillet

Fiddleで2つの問題を見つけました。1つはZetaの回答の最初の問題です。

メソッドはtoDataUrl();ではなくtoDataURL();ではなく、キャンバスを変数に保存するのを忘れていました。

したがって、Fiddleは正常に動作します http://jsfiddle.net/gfyWK/12/

これがお役に立てば幸いです！

2
limoragni

canvas.toDataURLは、元の画像URL（相対または絶対）がWebページと同じドメインに属さない場合は機能しません。ブックマークレットと、画像を含むWebページ内の単純なJavaScriptからテストしました。 David Walshの動作をご覧ください 例 。独自のWebサーバーにHTMLと画像を配置し、元の画像を相対URLまたは絶対URLに切り替え、外部画像URLに変更します。最初の2つのケースのみが機能しています。

1
skyrail

Fiddleを修正-キャンバスに複製された画像を表示...

そして、右クリックは.PNGとして保存できます

http://jsfiddle.net/gfyWK/67/

<div style="text-align:center">
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" />
<br />
<div id="for_jcrop">here the image should apear</div>
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas>
</div>

さらに、フィドルページのJS ...

乾杯

現在、これをサーバー上のファイルに保存することを検討しています--- ASP.net C＃（.aspx web form page）.

0
Si Simon