CanvasとImage間の変換について

この記事では、画像をキャンバスに変換する方法と、キャンバスから画像を抽出する方法を説明します。これを必要とする友人は、それを参考にしていただければ幸いです。 JS Canvas を画像に変換する
オリジナルのデモ: JavaScript Canvas Image Conversion Demo
先週の Mozilla Web 開発カンファレンスでは、私たちは 1 日のほとんどを将来の Mozilla マーケット アプリケーションについて議論することに費やしました。最近最も人気のあるモバイルアプリケーションであるInstagramが、なんと10億ドルでFaceBookに売却された。
余分なお金を稼ぐのは構わないので、Instagram スタイルのアプリケーションを作成することにしました (後で共有します)

この記事では、画像をキャンバスに変換する方法と、キャンバスが画像を抽出する方法を説明します。

画像をキャンバスに変換する

画像をキャンバス (アートボード、キャンバス) に変換するには、canvas 要素コンテキストのdrawImage メソッドを使用できます:

// 把image 转换为 canvas对象 
function convertImageToCanvas(image) { 
// 创建canvas DOM元素，并设置其宽高和图片一样 
var canvas = document.createElement("canvas"); 
canvas.width = image.width; 
canvas.height = image.height; 
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。 
canvas.getContext("2d").drawImage(image, 0, 0); 
return canvas; 
}

キャンバスを画像に変換する

画像が次のように変換されていると仮定します。キャンバス上で処理された後、次のメソッドを使用してキャンバスを Image オブジェクトに変換できます。

// 从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
//新Image对象，可以理解为DOM 
var image = new Image(); 
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
// 指定格式 PNG 
image.src = canvas.toDataURL("image/png"); 
return image; 
}

そうですね! 画像をキャンバスに変換するのは、あなたが思っているよりも簡単です。将来的には、これらのテクニックを使用して間違いなくたくさんのお金を稼ぐことができると思います。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

html5 画像回転のアニメーション効果を実現する方法

HTML5 contenteditable 属性分析

以上がCanvasとImage間の変換についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。