Canvas의 사용자 정의 아바타 기능 구현 코드 예제

저자：Eve Cole 업데이트 시간：2025-03-05 17:00:04

첫 번째로 작성 :

상사는 이틀 전에 Tiger의 공식 웹 사이트에서 Custom Avatar의 기능이 Flash에 의해 구현되었다고 말했습니다. 캔버스를 사용하여 동일한 기능을 구현하겠습니다. Hehe는 최근에 캔버스를 공부 한 것입니다. 그래서 나는 쉽게 동의했습니다 (실제로, 당신은 그것을 연구하지 않았다면 동의하지 않았습니다, hahahahaha ~).

성취 디스플레이 :

git 주소 : https://github.com/ry928330/portraitdiy

기능 설명 :

왼쪽의 작은 상자를 왼쪽에 드래그하면 마우스가 작은 정사각형 프레임의 오른쪽 아래쪽 모서리에 배치됩니다. 권리.
높은 높이를 입력하고 사용자 정의하는 데 필요한 크기를 사용자 정의하며 현재 동일한 높이의 동일한 아바타 사진 만 지원합니다.

세부 사항 구현 :

사진이있는 지역의 스크린 샷을 찍어야하기 때문에 캔버스를 만들고 그림이있는 지역을 덮어야합니다. 여기서, 우리는 DOM의 요소 클래스 이름을 기반으로 동일한 위치 캔버스를 만들 수있는 기능을 제공하고 원래 DOM 요소에 포함시킵니다.

 CREATECANVASBYCLASSNAME (tag) {var canvasinitialWidth = $ (). 왼쪽 ( '.' + tag). PortraitContainer ' (). 왼쪽; remelectobj.top = $; : '캔버스', 너비 : CanvasinitialWidth, 높이 : CanvasinitialHeight}; var appendele = '캔버스'); , ctx.fillst yle = rgba (0,0,0, 0);

이 캔버스를 사용하면 사진이있는 지역에서 원한 상태로 작동 할 수 있습니다. 먼저, 전체 영역을 낮추면 밝은 검은 색 그림자를 그린 다음 초기 작은 상자 영역에서 색상을 지 웁니다. 그런 다음 MouseDown, MouseMove, Mouseup 이벤트를 전체 페이지에 추가합니다.

 함수 mouseMoveFunc (이벤트) { / * 이벤트에서 행동 * / var newMousex = event.clearcanvasobj.left; CLEARCANVASOBJ.WIDTH && nowmousey> = CLEARCANVASOBJ.YSSTART && NOWMOUSEY <= CLEARCANVASOBJ > = clearcanvasobj.xstart + clearcanvasobj.width -10) && (nowmousex <= clearcanvasobj.xstart + clearcanvasobj.width + 10) && ey> = clearcancanvasobj.ysstart + clearcanvasobj.height -10) && (nowmousey <= remarcanvasobj.ysstart. CLEARCANVASOBJ .cursor = 'default';} var auterdomwidth = $ (. imgcontainer) // var outctx reclencanvasobj.ysstart) ry_ctx.fillRect (ClearCanvasoBj.xstart, clearc anvasobj.ystart, clearcanvasobj.width, clearcanvasobj.height (0, 0, 캔버스); = xdistance; clearcanvasobj.ysstart + = yDistance; width)> = euterdomwidth) {clearcanvv). askj.xstart = oterdomwidth -ClearCanvasObj.width;} if (remarcanvasobj.ysstart + clearcancanvasobj.height)> = outdomHeight) {clareCanVasobj.ysStart; 로그 ( '2', clearcanvasobj.xstart, clearcanvasobj.ystart) ry_ctx.clearrect (clearcanvasobjj vasobj.top, clearcanvasobj. width, clearcanvasobj.mousex = events (Clearcanvasobj.xstart, clearcanvasobj.width, var realdistance = math. XSTART + CLEARCANVASOBJ.WIDTH> = onverricomwidth) {clearcanvasobj.width = auterdomwidth-clearcanvasob.xstart; TerdomHeight -ClearCanvasobj.ystart; height = auterdomheight -clearcanvasobj.ystart;} if (clarecanvasobj.width <= 10) {clearcancanvasobj.width = 10;} if (clarecanvasobj.heigh <= 10) {clearcanvasob J.Height = 10;} ry_ctx. XSTART, CLEARCANVASOBJ.YSTART, CLEARCANVASOBJ = event.clientx; clearcanvasobj.mousey = Event.Clienty;}}

이 기능에서는 드래그의 경계 조건에주의를 기울여야합니다. 하나는 상자가 사진이있는 그림의 경계로 끌 수 없다는 것입니다. 프레임은 마우스의 스타일을 변경하기 위해 위치합니다. 드래그 과정에서, 우리는 정사각형 움직임이 움직이는 영역을 지속적으로 다시 형으로 인쇄 한 다음 (즉, 연속적으로 그리기의 그림자) 새 위치에서 ClearRect 함수를 불러서 작은 정사각형 프레임을 다시 닦아 냈습니다. 드래그 또는 스트레칭 과정에서, 우리는 컨테이너의 컨테이너에서 지속적으로 생산 공학 기능을 호출합니다 (각 컨테이너는 컨테이너의 크기에 따라 지속적으로 그려집니다. 코드는 다음과 같습니다.

 functionsmallpic (ImageUrl, 왼쪽, 상단, 폭, 높이) {var image (); foreach (function (it, index) {targetcanvas = document.getElementByid (item.class); targetctx.push (TargetCanvas.getContext ( '2d')); targe tctx [index] .clearRect (0,0, item.width, item.head); targetctx [index] .DrawImage (img, 왼쪽 -ClearCanvasObj.left, 상단 -ClearCanvasObj.top, 너비, 높이, 0, 0, 항목 .height);})}}}}.

이 기능의 역할에 대해 이야기합시다. DOGIMAGE 기능을 사용하여 필요한 영역을 차단할 수 있도록 DOM이있는 영역을 그림으로 돌려야하기 때문입니다. 따라서 먼저 HTML2CANVAS 라이브러리 기능을 사용 하여이 캔버스의 내용 에이 캔버스가 포함됩니다.

 html2canvas (document.getElementById ( 'imgcontainer'), {onrendered : function (canvas) {var indemurl = canvastranstoimage (canavs); ...}) 함수는 vastranstoimage (canvas) {var imageUrl = canvas.todataurl ( 'image/png '); 반환 imageUr;}

그런 다음 오른쪽에있는 캔버스 컨테이너를 촉진 할 수 있습니다.