\u0421\u043e\u0437\u0434\u0430\u0435\u043c web-part, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b<\/p>\n\n\n\n
<script src="\/_layouts\/15\/cropper\/cropper.js"><\/script>\n<link href="\/_layouts\/15\/cropper\/cropper.css" rel="stylesheet" \/>\n<script src="\/_layouts\/15\/cropper\/jquery-cropper.js"><\/script>\n\n<div class="form-ui ui blue segment">\n <span class="header">\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/span>\n <div class="form-row flex">\n <div class="form-item">\n <span class="title-ui">X<\/span>\n <asp:TextBox ID="_posX" CssClass="form-input" runat="server" style="width: 50px;"><\/asp:TextBox>\n <\/div> \n <div class="form-item">\n <span class="title-ui">Y<\/span>\n <asp:TextBox ID="_posY" CssClass="form-input" runat="server" style="width: 50px;"><\/asp:TextBox>\n <\/div> \n <div class="form-item">\n <span class="title-ui">Width<\/span>\n <asp:TextBox ID="_width" CssClass="form-input" runat="server" style="width: 50px;"><\/asp:TextBox>\n <\/div>\n <div class="form-item">\n <span class="title-ui">Height<\/span>\n <asp:TextBox ID="_height" CssClass="form-input" runat="server" style="width: 50px;"><\/asp:TextBox>\n <\/div> \n <div class="form-item">\n <span class="title-ui">Rotate<\/span>\n <asp:TextBox ID="_rotate" CssClass="form-input" runat="server" style="width: 50px;"><\/asp:TextBox>\n <\/div> \n <div class="form-item">\n <span class="title-ui">ScaleX<\/span>\n <asp:TextBox ID="_scaleX" CssClass="form-input" runat="server" style="width: 50px;"><\/asp:TextBox>\n <\/div> \n <div class="form-item">\n <span class="title-ui">ScaleY<\/span>\n <asp:TextBox ID="_scaleY" CssClass="form-input" runat="server" style="width: 50px;"><\/asp:TextBox>\n <\/div> \n <div class="form-item"> \n <span class="title-ui">\u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d<\/span>\n <asp:RadioButtonList CssClass="aspect-ratio" ID="_aspectRatio" runat="server" RepeatDirection="Horizontal">\n <asp:ListItem Value="1" Selected="True">1:1<\/asp:ListItem>\n <asp:ListItem Value="1.7777777777777777">16:9<\/asp:ListItem>\n <asp:ListItem Value="1.3333333333333333">4:3<\/asp:ListItem>\n <asp:ListItem Value="0.6666666666666666">2:3<\/asp:ListItem>\n <asp:ListItem Value="NaN">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439<\/asp:ListItem>\n <\/asp:RadioButtonList>\n <\/div> \n <\/div> \n <div class="form-row flex">\n <div class="form-item"> \n <input type="file" id="_inputImage" name="file" class="form-file-upload" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="zoom" data-option="0.1" title="\u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c">\n <i class="fa-solid fa-magnifying-glass-plus"><\/i>\n <\/button>\n <\/div> \n <div class="form-item"> \n <button class="action-btn" type="button" data-method="zoom" data-option="-0.1" title="\u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c">\n <i class="fa-solid fa-magnifying-glass-minus"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="move" data-option="-10" data-second-option="0" title="\u041f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0432\u043b\u0435\u0432\u043e">\n <i class="fa-solid fa-arrow-left"><\/i>\n <\/button>\n <\/div> \n <div class="form-item"> \n <button class="action-btn" type="button" data-method="move" data-option="10" data-second-option="0" title="\u041f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e">\n <i class="fa-solid fa-arrow-right"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="move" data-option="0" data-second-option="-10" title="\u041f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0432\u0432\u0435\u0440\u0445">\n <i class="fa-solid fa-arrow-up"><\/i>\n <\/button>\n <\/div> \n <div class="form-item"> \n <button class="action-btn" type="button" data-method="move" data-option="0" data-second-option="10" title="\u041f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0432\u043d\u0438\u0437">\n <i class="fa-solid fa-arrow-down"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="rotate" data-option="-45" title="\u0412\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043b\u0435\u0432\u043e">\n <i class="fa-solid fa-rotate-left"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="rotate" data-option="45" title="\u0412\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e">\n <i class="fa-solid fa-rotate-right"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="scaleX" data-option="-1" title="\u041e\u0442\u0440\u0430\u0437\u0438\u0442\u044c \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438">\n <i class="fa-solid fa-arrows-left-right"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="scaleY" data-option="-1" title="\u041e\u0442\u0440\u0430\u0437\u0438\u0442\u044c \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438">\n <i class="fa-solid fa-arrows-up-down"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="reset" title="\u0421\u0431\u0440\u043e\u0441">\n <i class="fa-solid fa-rotate"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <button class="action-btn" type="button" data-method="getCroppedCanvas" data-option="{ 'maxWidth': 4096, 'maxHeight': 4096 }" title="\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c">\n <i class="fa-solid fa-check"><\/i>\n <\/button>\n <\/div>\n <div class="form-item"> \n <a class="action-btn" id="download" href="\/" title="\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c" style="display:none;" ><i class="fa-solid fa-download"><\/i><\/a>\n <\/div> \n <\/div>\n<\/div>\n\n<div>\n <asp:Image ID="_image" runat="server" \/>\n<\/div><\/code><\/pre>\n\n\n\n\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u0432 code behind <\/p>\n\n\n\n
private SPSite oSite;\nprivate SPWeb oWeb;\nprivate string imgURL;\n\nprotected void Page_Load(object sender, EventArgs e)\n{\n oSite = SPContext.Current.Site;\n oWeb = SPContext.Current.Web;\n _image.CssClass = "cropper";\n\n if (Page.Request.Params["source"] != null)\n {\n imgURL = Page.Request.Params["source"]; \n _image.ImageUrl = imgURL;\n }\n}<\/code><\/pre>\n\n\n\n\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c JS<\/p>\n\n\n\n
<script language="javascript" type="text\/javascript">\n $(document).ready(function() { \n \n $("div[class='ms-cui-topBar2']").hide();\n $("table[class='ms-webpartPage-root']").css("border-spacing", "0");\n $(".ms-webpartPage-root").css("border-spacing", "0");\n\n var URL = window.URL || window.webkitURL; \n \n var $image = $('.cropper');\n var $download = $('#download');\n var $inputImage = $("input[id$='_inputImage']");\n $image.hide();\n \n setTimeout(InitCropper, 100);\n \n function InitCropper()\n {\n $image.show();\n \n var $dataX = $("input[id$='posX']");\n $dataX.val($image.width()); \n var $dataY = $("input[id$='posY']");\n $dataY.val($image.height()); \n var $dataHeight = $("input[id$='height']");\n $dataHeight.val($image.height());\n var $dataWidth = $("input[id$='width']");\n $dataWidth.val($image.width());\n var $dataRotate = $("input[id$='rotate']");\n $dataRotate.val("0");\n var $dataScaleX = $("input[id$='scaleX']");\n $dataScaleX.val("0");\n var $dataScaleY = $("input[id$='scaleY']");\n $dataScaleY.val("0");\n var options = {\n aspectRatio: 1 \/ 1,\n preview: '.img-preview', \n \n \/\/data:{ \/\/define cropbox size\n \/\/width: 200,\n \/\/height: 90,\n \/\/},\n crop: function (e) {\n $dataX.val(Math.round(e.detail.x));\n $dataY.val(Math.round(e.detail.y));\n $dataHeight.val(Math.round(e.detail.height));\n $dataWidth.val(Math.round(e.detail.width));\n \/\/$dataHeight.val(200);\n \/\/$dataWidth.val(200);\n $dataRotate.val(e.detail.rotate);\n $dataScaleX.val(e.detail.scaleX);\n $dataScaleY.val(e.detail.scaleY);\n }\n };\n var $aspectRatio = $('.aspect-ratio');\n \n var $actionBtn = $('.action-btn');\n \n var originalImageURL = $image.attr('src');\n var uploadedImageName = 'cropped.jpg';\n var uploadedImageType = 'image\/jpeg';\n var uploadedImageURL;\n \/*\n $image.cropper({\n \/\/aspectRatio: 16 \/ 9,\n crop: function(e) {\n $dataX.val(Math.round(e.detail.x));\n $dataY.val(Math.round(e.detail.y));\n $dataHeight.val(Math.round(e.detail.height));\n $dataWidth.val(Math.round(e.detail.width));\n $dataRotate.val(e.detail.rotate);\n $dataScaleX.val(e.detail.scaleX);\n $dataScaleY.val(e.detail.scaleY); \n }\n });\n *\/\n \/\/ Get the Cropper.js instance after initialized\n var cropper = $image.data('cropper');\n \n \/\/ Cropper\n $image.on({\n ready: function (e) {\n \/\/console.log(e.type);\n },\n cropstart: function (e) {\n \/\/console.log(e.type, e.detail.action);\n },\n cropmove: function (e) {\n \/\/console.log(e.type, e.detail.action);\n },\n cropend: function (e) {\n \/\/console.log(e.type, e.detail.action);\n },\n crop: function (e) {\n \/\/console.log(e.type);\n },\n zoom: function (e) {\n \/\/console.log(e.type, e.detail.ratio);\n }\n }).cropper(options);\n \n \/\/ \u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\n $aspectRatio.on('change', 'input', function () {\n var $this = $(this);\n \/\/var name = $this.attr('name');\n \/\/var type = $this.prop('type');\n var cropBoxData;\n var canvasData;\n \n if (!$image.data('cropper')) {\n return;\n }\n \/*\n if (type === 'checkbox') {\n options[name] = $this.prop('checked');\n cropBoxData = $image.cropper('getCropBoxData');\n canvasData = $image.cropper('getCanvasData');\n \n options.ready = function () {\n $image.cropper('setCropBoxData', cropBoxData);\n $image.cropper('setCanvasData', canvasData);\n };\n } \n else *\/\n \/\/if (type === 'radio') \n \/\/{\n options["aspectRatio"] = $this.val();\n \/\/}\n \n $image.cropper('destroy').cropper(options);\n });\n \n \/\/ Download\n if (typeof $download[0].download === 'undefined') {\n $download.addClass('disabled');\n }\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0438\n $actionBtn.click(function() {\n var $this = $(this);\n var data = $this.data();\n var cropper = $image.data('cropper');\n var cropped;\n var $target;\n var result;\n \n if ($this.prop('disabled') || $this.hasClass('disabled')) {\n return;\n }\n \n if (cropper && data.method) {\n data = $.extend({}, data); \/\/ Clone a new one\n \n if (typeof data.target !== 'undefined') {\n $target = $(data.target);\n \n if (typeof data.option === 'undefined') {\n try \n {\n data.option = JSON.parse($target.val());\n } catch (e) \n {\n console.log(e.message);\n }\n }\n }\n \n cropped = cropper.cropped;\n \n switch (data.method) \n {\n case 'rotate':\n if (cropped && options.viewMode > 0) \n {\n $image.cropper('clear');\n }\n \n break;\n \n case 'getCroppedCanvas':\n if (uploadedImageType === 'image\/jpeg') \n {\n if (!data.option) \n {\n data.option = {};\n }\n \n data.option.fillColor = '#fff';\n }\n \n break;\n }\n \n result = $image.cropper(data.method, data.option, data.secondOption);\n \n switch (data.method) {\n case 'rotate':\n if (cropped && options.viewMode > 0) \n {\n $image.cropper('crop');\n }\n \n break;\n \n case 'scaleX':\n case 'scaleY':\n $(this).data('option', -data.option);\n break;\n \n case 'getCroppedCanvas':\n if (result) \n {\n \/\/console.log(result.toDataURL(uploadedImageType));\n \/\/window.open(result.toDataURL(uploadedImageType), '_blank').focus();\n $download.attr('href', result.toDataURL(uploadedImageType));\n $download.css("display", "block")\n \/\/ Bootstrap's Modal\n \/\/$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);\n \n if (!$download.hasClass('disabled')) \n {\n download.download = uploadedImageName;\n $download.attr('href', result.toDataURL(uploadedImageType));\n }\n \n }\n \n break;\n \n case 'destroy':\n if (uploadedImageURL) \n {\n URL.revokeObjectURL(uploadedImageURL);\n uploadedImageURL = '';\n $image.attr('src', originalImageURL);\n }\n \n break;\n }\n \n if ($.isPlainObject(result) && $target) \n {\n try \n {\n $target.val(JSON.stringify(result));\n } \n catch (e) \n {\n console.log(e.message);\n }\n }\n }\n });\n \n \/\/ Keyboard\n $(document.body).on('keydown', function (e) {\n if (e.target !== this || !$image.data('cropper') || this.scrollTop > 300) \n {\n return;\n }\n \n switch (e.which) {\n case 37:\n e.preventDefault();\n $image.cropper('move', -1, 0);\n break;\n \n case 38:\n e.preventDefault();\n $image.cropper('move', 0, -1);\n break;\n \n case 39:\n e.preventDefault();\n $image.cropper('move', 1, 0);\n break;\n \n case 40:\n e.preventDefault();\n $image.cropper('move', 0, 1);\n break;\n }\n });\n \n \/\/ \u0418\u043c\u043f\u043e\u0440\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \n if (URL) \n {\n $inputImage.change(function () {\n var files = this.files;\n var file;\n \n if (!$image.data('cropper')) \n {\n return;\n }\n \n if (files && files.length) \n {\n file = files[0];\n \n if (\/^image\\\/\\w+$\/.test(file.type)) \n {\n uploadedImageName = file.name;\n uploadedImageType = file.type;\n \n if (uploadedImageURL) \n {\n URL.revokeObjectURL(uploadedImageURL);\n }\n \n uploadedImageURL = URL.createObjectURL(file);\n $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);\n $inputImage.val('');\n $download.css("display", "none")\n } \n else \n {\n window.alert('\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0435\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c');\n }\n }\n });\n } \n else \n {\n $inputImage.prop('disabled', true).parent().addClass('disabled');\n }\n } \n \n });\n<\/script>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c web-part, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u0432 code behind \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c JS<\/p>\n","protected":false},"author":1,"featured_media":241,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,11,3],"tags":[47,28,33],"class_list":["post-240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-sharepoint","category-web","tag-image-editor","tag-javascript","tag-sharepoint"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=240"}],"version-history":[{"count":1,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts\/240\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts\/240\/revisions\/242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/media\/241"}],"wp:attachment":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}