canvas使用してフィルターを実装するだけでなく、オフスクリーン テクノロジーを使用して虫眼鏡のように機能することもできます。
説明の便宜上、この記事は 2 つのアプリケーション部分に分かれています。
Canvas 学習とフィルター実装がdrawImageインターフェースに導入されました。このインターフェイスは、イメージを描画するだけでなく、あるcanvasオブジェクトを別のcanvasオブジェクトに描画することもできます。これはオフスクリーンテクノロジーです。
コードには 2 つの Canvas タグがあります。それらはそれぞれ目に見えるものと見えないものです。 非表示のキャンバス オブジェクト上の Context オブジェクトは、画像の透かしを配置する場所です。
詳細については、コードのコメントを参照してください。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>Learn Canvas</title> <style> Canvas { 表示: ブロック マージン: 0 自動; 境界: 1px # 222; } 入力 { 表示: ブロック; マージン: 20px 自動; </style></head><body> <div id=app> <canvas id=my-canvas></canvas> <input type=range value=1.0 min=0.5 max=3.0 step=0.1> <canvas id=watermark-canvas style=display: none;></canvas> </div> <script type=text/javascript> window.onload = function () { var Canvas = document.querySelector(#my-canvas) var WatermarkCanvas = document.querySelector(#watermark-canvas) var slider = document.querySelector(input) varscale = slider.value var ctx = Canvas.getContext('2d') var WatermarkCtx = WatermarkCanvas.getContext(2d) /* 2 番目のCanvasで取得したContextオブジェクトにウォーターマークを追加 */watermarkCanvas.width = 300watermarkCanvas.height = 100ウォーターマークCtx.font = ボールド20px ArialウォーターマークCtx.lineWidth = 1ウォーターマークCtx.fillStyle = rgba(255, 255, 255, 0.5)ウォーターマークCtx.fillText(=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = new Image() img.src = ./img/photo.jpg /* 画像読み込み後に操作を実行*/ img.onload = function () { Canvas.width = img.width; drawingImageByScale(canvas, ctx, img, scale ,watermarkCanvas); // input タグのmousemoveイベントをリッスンします //注:mousemove は値の変化をリアルタイムで監視し、大量のメモリを消費します。 * **********/ } /** * * @param {オブジェクト} Canvas Canvas オブジェクト * @param {オブジェクト} ctx * @param {オブジェクト} img * @param {数値} スケールスケーリング率* @param {Object}ウォーターマークウォーターマークオブジェクト*/ functiondrawImageByScale(canvas, ctx, img,scale,watermark) { //画像は比率に従ってスケーリングされます var width = img.width *scale, height = img. height *scale // (dx, dy): キャンバス上に img を描画する開始座標 var dx = Canvas.width / 2 - width / 2, dy = Canvas.height / 2 - height / 2 ctx.clearRect(0, 0, Canvas.width, Canvas.height) // No1 キャンバスをクリア ctx.drawImage(img, dx, dy, width, height) // No2 画像を再描画 if (ウォーターマーク) { // No3 ウォーターマークがあるかどうかを判断します: はい、ウォーターマークを描画します ctx.drawImage(watermark, Canvas.width - Watermark.width, Canvas.height -ウォーターマーク.高さ) } } </script></body></html>効果は次の図に示されています。
スライダーをドラッグして画像を拡大または縮小します。次に、右クリックして画像を保存します。保存された画像には、以下に示すようにすでに透かしが入っています。
3. 虫眼鏡を実装する前述の中央ズームを基に、虫眼鏡のマスターは次の 2 つの部分に注意を払う必要があります。
コードは次のとおりです。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>Document</title> <style> キャンバス { 表示: ブロック マージン: 0 自動; 1px ソリッド #222 ; } </style></head><body> <canvas id=my-canvas></canvas> <canvas id=off-canvas style=display: none;></canvas> <script> var isMouseDown = false、scale = 1.0 var Canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // オフスクリーンキャンバス var ctx = Canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //オフスクリーンキャンバスのコンテキストオブジェクト var img = new Image() window.onload = function () { img.src = ./img/photo.jpg img.onload = function () { Canvas.width = img.width Canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // 拡大縮小率を計算するscale = offCanvas.width / Canvas.width // 最初の認識状態では、両方のキャンバスが画像を描画しますctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) offCtx.drawImage(img, 0, 0, Canvas.width, Canvas.height) } // マウスが押された Canvas.onmousedown = function (event) { event.preventDefault() // デフォルトのイベントを無効にします var point = windowToCanvas(event.clientX,event.clientY) //キャンバスラベルに対するマウスの相対座標を取得します isMouseDown = truedrawCanvasWithMagnifier(true, point) // オフスクリーンキャンバスに拡大画像を描画します} // マウスを移動します Canvas.onmousemove = function (event) {event.preventDefault () // デフォルトのイベントを無効にする if (isMouseDown === true) { var point = windowToCanvas(event.clientX,event.clientY)drawCanvasWithMagnifier(true, point) } } // マウスを放します Canvas.onmouseup = function (event) {event.preventDefault() // デフォルトのイベントを無効にします isMouseDown = falsedrawCanvasWithMagnifier(false) // オフスクリーン拡大鏡を描画しません} // 移動マウスがキャンバスの外に出る label Canvas .onmouseout = function (event) {event.preventDefault() // デフォルトのイベントを無効にする isMouseDown = falsedrawCanvasWithMagnifier(false) //画面外の虫眼鏡は描画しないでください} } /** * キャンバスの左上隅を基準としたマウスの座標を返します * @param {Number} x マウスの画面座標 x * @param {Number} y マウスの画面座標 y */ function windowToCanvas(x , y) { var bbox = Canvas.getBoundingClientRect() // bbox は画面を基準とした Canvas の座標を格納します return { x: x - bbox.x, y: y - bbox.y } } functiondrawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, Canvas.width, Canvas.height) // キャンバスをクリアする ctx.drawImage(img, 0, 0, Canvas.width, Canvas . height) // キャンバスに画像を描画します/* オフスクリーンを使用して虫眼鏡を描画します*/ if (isShow) { var { x, y } = point var mr = 50 // 正方形の虫眼鏡の辺の長さ // (sx, sy): 拡大する画像の開始座標 var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): 拡大画像の開始座標 var dx = x - mr, dy = y - mr // offCanvas 上に (sx, sy) から始まる長さと幅が mr の正方形の領域を作成します // // キャンバス上の (dx, dy) から始まる長さと幅が 2 * mr の正方形の表示領域にズームインします。 // これにより拡大効果が得られます ctx.drawImage(offCanvas, sx, sy, mr, mr, dx 、 dy 、 2 * ミスター、 2 * ミスター) } /************************/ } </script></body></html >虫眼鏡の効果は次の図に示されています (赤いペンでマークされた領域が正方形の虫眼鏡です)。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。