Босс сказал мне два дня назад, что функция пользовательского аватара на официальном сайте тигра была реализована 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 ');Затем вы можете облегчить контейнер с холстом.
Связанная зависимость:
Копировать код