84

キャンバス要素に存在する画像を で表す画像に変換する可能性はあり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このスクリプトでキャンバス要素を画像に変更するにはどうすればよいですか? (このスクリプトにはいくつかのバグがあるかもしれません。)

4

5 に答える 5

107

canvas.toDataURL()ソースとして使用できるデータ URLが提供されます。

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

完全な例

いくつかのランダムな行を含む完全な例を次に示します。黒枠の画像は で生成され<canvas>、青枠の画像は のコピーであり、のデータ URL<img>が埋め込まれています。<canvas>

// This is just image generation, skip to DATAURL: below
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");

// Just some example drawings
var gradient = ctx.createLinearGradient(0, 0, 200, 100);
gradient.addColorStop("0", "#ff0000");
gradient.addColorStop("0.5" ,"#00a0ff");
gradient.addColorStop("1.0", "#f0bf00");

ctx.beginPath();
ctx.moveTo(0, 0);
for (let i = 0; i < 30; ++i) {
  ctx.lineTo(Math.random() * 200, Math.random() * 100);
}
ctx.strokeStyle = gradient;
ctx.stroke();

// DATAURL: Actual image generation via data url
var target = new Image();
target.src = canvas.toDataURL();

document.getElementById('result').appendChild(target);
canvas { border: 1px solid black; }
img    { border: 1px solid blue;  }
body   { display: flex; }
div + div {margin-left: 1ex; }
<div>
  <p>Original:</p>
  <canvas id="canvas" width=200 height=100></canvas>
</div>
<div id="result">
  <p>Result via &lt;img&gt;:</p>
</div>

以下も参照してください。

于 2012-04-21T09:38:48.347 に答える
8

これを行う。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" />
于 2013-10-30T01:11:26.020 に答える
3

私はあなたの Fiddle に 2 つの問題を見つけました。問題の 1 つは、Zeta の回答の最初のものです。

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

したがって、フィドルは正常に動作するようになりましたhttp://jsfiddle.net/gfyWK/12/

これが役立つことを願っています！

于 2012-11-14T18:25:25.407 に答える
1

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

于 2012-11-22T23:33:28.437 に答える
0

フィドルを修正 - キャンバスに複製された画像を更新して表示...

また、右クリックで .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...

乾杯 Si

現在、これをサーバー上のファイルに保存することを検討しています --- ASP.net C# (.aspx Web フォーム ページ)

于 2014-11-14T14:56:56.990 に答える