Canvasのカスタムアバター関数実装コードの例

著者：Eve Cole 更新時間：2025-03-05 17:00:04

最初に書かれています：

上司は、2日前に、Tigerの公式Webサイトでのカスタムアバターの機能がFlashによって実装されていることを伝えました。キャンバスを使用して同じ機能を実装させてください、Heheは最近キャンバスを勉強したばかりなので、すぐに同意しました（実際、あなたがそれを勉強していない場合、あなたは同意しません、ハハハハハ〜）

達成ディスプレイ：

gitアドレス：https：//github.com/ry928330/portraitdiy

機能の説明：

左側の小さなボックスをドラッグするか、マウスは小さな正方形のフレームの右下隅に配置されます。右。
高さを入力し、カスタマイズする必要があるサイズをカスタマイズし、現在同じ高さの同じアバター画像のみをサポートしています。

詳細を実装：

写真があるエリアのスクリーンショットを撮る必要があるため、キャンバスを作成し、写真のある領域をカバーする必要があります。ここでは、DOMの要素のクラス名に基づいて同じ位置キャンバスを作成する関数を指定し、元のDOM要素でカバーします。

 createcanvasbyclassname（tag）{var canvasitialwidth = $（ ' + tag）。左（ '。 +タグ）。 PortorityContainer '） （）TOP + 1;左; ： 'Canvas'、width：canvasitialwidth、height：canvasitialheight}）; var appentle = $（ '。canvas'）; 、CanvasInitight）;

このキャンバスを使用すると、写真があるエリアでWantonlyを動作させることができます。まず、領域全体を下げて明るい黒い影を描き、最初の小さなボックス領域の色を消去します。次に、Mousemove、Mouseupイベントをページ全体に追加します。

関数mousemovefunc（イベント）{ / * bar newmousex = event.clientx -ClearCanvasobj.Left; Clearcanvasobj.width && nowmousey> = clearcanvasobj.ysstart && nowmousey <= clearcanvasobj.heigh）anvasarea = true; > = ClearCanvasobj.xstart + clearcanvasobj.width -10）&&（nowmousex <= clearcanvasobj.xstart + clearcanvasobj.width + 10）&& ey> = clearcanvasobj.ysstart + clearcanvasobj.height -10）&&（ Clearcanvasobj.height + 10） .cursor = 'default';} var outerdomwidth = $（。imgcontainer） ; // var outctx.getContext（ '2d'）; 、Clearcanvasobj.ysstart）ry_ctx.fillrect（clearcanvasobj.ystart、clearcanvasobj.width、clearcanvasobj.height）; = Xdistance; clearcanvasobj.ysstart + = ydistant; width）> = outerdomwidth）{clearcanvv）。 （ '2'、clearcanvasobj.xstart、clearcanvasobj.ystart）ry_ctx.clearrect（clearcanvasobjj.xstart、clearcanvasobj.width、clearcanvasobj.height）; vasobj。 clearcanvasobj.height、clearcanvasobj.mousex = clearcanvasobj.clienty;} // clearcanvasobj.isrightcorner） （Clearcanvasobj.xstart、clearcanvasobj.width、clearcanvasobj.height）; XSTART + CLEARCANVASOBJ.WIDTH> = OutricomWidth）{ClearCanvaSobj.Width = outerdomwidth -Clearcanvasob.xstart = clearcanvasobj.heigh; asobj.ystart; height = outerdomheight -Clearcanvasobj.ystart;} if（clearcanvasobj.width <= 10）{clearcanvasobj.width = 10;} if（clearcanvasobj.heigh <= 10）{clearcanvasob j.height = 10;} ry_ctx.clearrect Xstart、Clearcanvasobj.width、Clearcanvasobj.xstart+ clearcanvasobj.ysStart、Clearcanvasobj.top、Clearcanvasobj.width、clearcanvasobj.height、 canvasobj.mousey = event.clienty;}}

関数では、ドラッグの境界条件に注意を払う必要があります。1つは、箱を絵の境界にドラッグできないことです。フレームは、マウスのスタイルを変更するために配置されています。ドラッグプロセス中に、正方形の動きが動いた領域（つまり、連続的に描画の影）を常に再塗装し、新しい位置のclearRect関数と呼び、小さな正方形のフレームを再び削除しました。ドラッグまたはストレッチの過程で、右側のコンテナ内のプロデュースマルピック関数を常に呼び出します。コードは次のとおりです。

 functionmallpic（左、幅、高さ）{var img.src = yimasurl; foreach（function（it、index）{targetcanvas = document.getElementbyId（item.class）; stargentctx.push（targetcanvas.getContext（ '2d'））; targe tctx [index] .clearrect（0,0、item.width、 item.head）; Targetctx [index] .drawimage（reft -clearcanvasobj.Left、width、height、height、0、0、item.height）}}}

この機能の役割について話しましょう。 DOMが配置されている領域を画像に変換して、DrawImage関数を使用して必要な領域を傍受できるようにする必要があるためです。したがって、最初にhtml2canvasライブラリ関数を使用して、このキャンバスのコンテンツには、このキャンバスが次のように変換されます。

 html2canvas（document.getElementbyid（ 'imgcontainer'）、{onRendered：function（canvas）{var imageurl = canvastranstoimage（canavs）; ...}）function can vastranstoimage（canvas）{var imageurl = canvas.todataurl（ 'image/png '）;}

次に、右側のキャンバスコンテナを促進することができます。