Пример реализации индивидуальной аватарской функции Canvas

Босс сказал мне два дня назад, что функция пользовательского аватара на официальном сайте тигра была реализована Flash. Итак, позвольте мне использовать Canvas для реализации той же функции, хе -хе, недавно изученный холст, поэтому я с готовностью согласился (на самом деле, вы не согласились, если вы не изучали его, хахахахаха ~)

Адрес GIT: https://github.com/ry928330/portraitdiy

• Перетащите левую маленькую коробку слева, или мышь расположено в правом нижнем углу маленькой квадратной рамки. Право.
• Введите высокую высоту, настройте размер, который вам необходимо настроить, и в настоящее время поддерживает только ту же изображение аватара с той же высотой.

Поскольку вы должны сделать снимок экрана в области, где находится картинка, вы должны сделать холст и покрыть область, где находится картина. Здесь мы даем функцию для создания такого же положения холста на основе имени класса элемента в DOM, и прикрываем ее на исходном элементе DOM:

 Функция CreateCanvasbyclassname (Tag) {var canvasinitialwidth = $ ('.' + Tag) .width (); слева -$ ('.' + Офицер (). слева; : 'Canvas', ширина: CanvasinitialWidth, высота: CanvasinitialHeight}); Var Appendele = $ ('. PortraitContainer'). , Canvasinitight);

С помощью этого холста вы можете беспрепятственно работать в той области, где находится ваша фотография. Сначала опустите всю область, чтобы нарисовать легкую черную тень, а затем стирайте цвет в начальной области маленькой коробки. Затем добавьте MouseDown, MouseMove, MouseUp Event на всю страницу.

 Функция mouseMovefunc (event) { / * act на событии * / var newmousex = event.clientx -clearcanvasobj.left; Clearcanvasobj.width && nowmousey> = clearcanvasobj.ysstart && nowmousey <= clearcanvasobj.ysstart + clearcanvasobj.heigh) anvasarea = true; > = Clearcanvasobj.xstart + clearcanvasobj.width -10) && (nowmousex <= clearcanvasobj.xstart + clearcanvasobj.width + 10) && ey> = clearcanvasobj.ysstart + clearcanvasobj.height -10) && (wylymousey <= clearcasobsobsobs Clearcanvasobj.height + 10) {clearcanvasobj.iscanvasarea = true; .cursor = 'default';} var outterdomwidth = $ (. Imgcontainer). ; , clearcanvasobj.ysstart) ry_ctx.fillrect (clearcanvasobj.xstart, clearc anvasobj.ystart, clearcanvasobj.width, clearcanvasobj.height); = Xdistance; ширина)> = OverdomWidth) {clearCanvv). Журнал ('2', clearcanvasobj.xstart, clearcanvasobj.ystart) ry_ctx.clearrect (clearcanvasobj Asobj.top, clearcanvasobj. ширина, ClearCanvasobj.height, ImageUrl) (Clearcanvasobj.xstart, clearcanvasobj.ystart, clearcanvasobj.width, clearcanvasobj. xstart + clearcanvasobj.width> = uturicomwidth) {clearcanvasobj.width = overdomwidth -clearcanvasob.xstart; Terdomeight -clearcanvasobj.ystart; Height = OutterDomeight -clearcanvasobj.ystart;} if (clearcanvasobj.width <= 10) {clearcanvasobj.width = 10;} if (clearcanvasobj.heigh <= 10) {clearcanvasob j.height = 10;} ry_ctx.clearrect (clearcanvasob j.height = 10; xstart, clearcanvasobj.ystart, clearcanvasobj.width, clearcanvasobj.height); = Event.Clientx; = event.clienty;}}

В этой функции необходимо обратить внимание на граничное условие перетаскивания, одно из них заключается в том, что коробка не может быть перетаскивается на границу изображения, где изображена изображение; Рамка расположена, чтобы изменить стиль мыши. Во время процесса перетаскивания мы постоянно переоценивали область, где движется квадратное движение (то есть тень непрерывного рисования), а затем называли функцию ClearRect в новом положении, чтобы переоценить небольшую квадратную раму. В процессе перетаскивания или растяжения мы будем постоянно вызывать функцию производительности. Код заключается в следующем:

 Функция создает Mallpic (ImageUrl, слева, вверху, ширина, высота) {var img = new Image (); Foreach (function (it, index) {targetCanvas = document.getElementByid (item.class); item.head);

Давайте поговорим о роли этой функции. Потому что вы должны повернуть область, где DOM расположена в картинке, чтобы вы могли использовать функцию DrawImage, чтобы перехватить необходимую область. Таким образом, мы используем функцию библиотеки HTML2CANVAS, чтобы говорить о картине.

 Html2canvas (document.getElementbyId ('imgcontainer'), {onrendered: function (canvas) {var imageurl = canvastranstoimage (canavs); ...}) функция может VastranstoImage (canvas) {var imageurl = canvas.todataurl ('Image/png/png ');

Затем вы можете облегчить контейнер с холстом.

Связанная зависимость: