1

したがって、クライアント側のコードは 2 つの PNG 画像を受け取ります。そのうちの 1 つは半透明です。最初の画像を 2 番目の画像にオーバーレイし、それを 3 番目の PNG ファイルに変換して後で使用するにはどうすればよいですか? それらをレイヤーとして使用して1つのPNG画像を作成するのが好きです。それを行う方法やフレームワークはありますか？

4

2 に答える 2

1

やり方は本当に簡単です。drawImage使用する必要があるのは、イメージをレイヤーでキャンバスに描画することだけです。保存toDataURLに関しては、画像の base64 URL を返すものを使用します。これを使用して、何でも実行したり、新しいウィンドウで開いたりすることができます。ただし、データを取得するには、コードが実行されているドメインから画像を取得する必要があります。 url、またはセキュリティ例外がスローされます。jsfiddle の例では、例として 2 つのランダムな Web サイトから画像を取得しているため、セキュリティ例外がスローされます。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementsByTagName("img");

canvas.width = 400;
canvas.height = 400;
ctx.drawImage(image[0],0,0);
ctx.drawImage(image[1],0,0);

// will raise security exception if not from the same domain as the code.
var newImage = canvas.toDataURL();
​

ライブデモ

于 2012-10-07T08:00:30.967 に答える
0

Pixasticは、ほんの少しの JavaScript を使用して、画像に対してさまざまな操作、フィルター、凝った効果を実行できる JavaScript ライブラリです。ライブラリの詳細については、紹介ページを参照してください。

CamanJSの主な焦点は、HTML5 キャンバスと Javascript を使用して画像を操作することです。使いやすいインターフェイスと、高度で効率的な画像/キャンバス編集技術を組み合わせたものです。また、完全にライブラリに依存せず、jQuery、YUI、Scriptaculous、MooTools などと一緒に安全に使用できます。

于 2012-10-06T13:07:29.480 に答える