コメント:この記事では、画像をキャンバスに変換する方法と、画像を抽出する方法を示します。サンプルコードは次のとおりです。このニーズを持つ友人はそれを参照できます。それがあなたに役立つことを願っています。
JSキャンバスと画像はお互いを変換しますオリジナルデモ:JavaScriptキャンバス画像変換デモ
先週のMozilla Web Development Conferenceで、将来のMozilla Marketアプリケーションについて議論するために1日のほとんどを費やすことになりました。 Instagramは最近最も人気のあるモバイルアプリであり、Facebookに10億ドルの空の価格で販売されています。
余分なお金を稼ぐことを気にしないので、Instagramスタイルのアプリを作成することにしました(後で共有します)
この記事では、画像をキャンバスに変換する方法と画像を抽出する方法について説明します。
画像をキャンバスに変換します
画像をキャンバス(アートボード、キャンバス)に変換するには、キャンバス要素コンテキストのドローイメージメソッドを使用できます。
//画像をCanvasオブジェクトに変換します
関数convertimagetocanvas(画像){
//キャンバスDOM要素を作成し、その幅と高さを写真と同じに設定します
var canvas = document.createelement( "canvas");
canvas.width = image.width;
canvas.height = image.height;
//座標(0,0)ここからの図面を示します。これはオフセットに相当します。
canvas.getContext( "2d")。drawimage(image、0、0);
キャンバスを返します。
}
キャンバスを画像に変換します
画像がキャンバスで処理されていると仮定すると、次の方法を使用してキャンバスを画像オブジェクトに変換できます。
//キャンバスから画像を抽出します
関数convertcanvastoimage(canvas){
//新しい画像オブジェクトはDOMとして理解できます
var image = new Image();
// canvas.todataurlは、base64エンコードされたURLの文字列を返します。もちろん、ブラウザ自体はそれをサポートする必要があります。
//フォーマットPNGを指定します
image.src = canvas.todataurl( "image/png");
画像を返します。
}
ええと!画像画像とキャンバスの変換は、あなたが思っているよりも簡単です。将来、私はあなたにさまざまな画像処理技術を実証します。私はあなたが間違いなくこれらのテクノロジーで多くのお金を稼ぐと信じています。