Mercurial Hosting > nabble
view src/nabble/view/web/util/image-crop.js @ 62:4674ed7d56df default tip
remove n2
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Sat, 30 Sep 2023 20:25:29 -0600 |
parents | 7ecd1a4ef557 |
children |
line wrap: on
line source
/* (C) www.dhtmlgoodies.com, April 2006 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland */ var crop_script_alwaysPreserveAspectRatio = true; var crop_script_fixedRatio = false; var crop_script_browserIsOpera = navigator.userAgent.indexOf('Opera') >= 0 ? true : false; var cropDiv_left = false; var cropDiv_top = false; var cropDiv_right = false; var cropDiv_bottom = false; var cropDiv_dotted = false; var crop_currentResizeType = false; var cropEvent_posX; var cropEvent_posY; var cropEvent_eventX; var cropEvent_eventY; var crop_resizeCounter = -1; var crop_moveCounter = -1; var crop_imageDiv = false; var imageDiv_currentWidth = false; var imageDiv_currentHeight = false; var imageDiv_currentLeft = false; var imageDiv_currentTop = false; var smallSquare_tl; var smallSquare_tc; var smallSquare_tr; var smallSquare_lc; var smallSquare_rc; var smallSquare_bl; var smallSquare_bc; var smallSquare_br; var offsetSmallSquares = Math.floor(smallSquareWidth / 2); var cropScriptAjaxObjects = new Array(); var preserveAspectRatio = false; var cropWidthRatio = false; // width of cropping area relative to height function crop_createDivElements(basedir) { crop_imageDiv = document.getElementById('imageContainer'); cropDiv_left = document.createElement('DIV'); cropDiv_left.className = 'crop_transparentDiv'; cropDiv_left.style.visibility = 'visible'; cropDiv_left.style.left = '0px'; cropDiv_left.style.top = '0px'; cropDiv_left.style.height = crop_imageHeight + 'px'; cropDiv_left.style.width = '0px'; cropDiv_left.innerHTML = '<span></span>'; crop_imageDiv.appendChild(cropDiv_left); cropDiv_top = document.createElement('DIV'); cropDiv_top.className = 'crop_transparentDiv'; cropDiv_top.style.visibility = 'visible'; cropDiv_top.style.left = '0px'; cropDiv_top.style.top = '0px'; cropDiv_top.style.height = '0px'; cropDiv_top.style.width = crop_imageWidth + 'px'; cropDiv_top.innerHTML = '<span></span>'; crop_imageDiv.appendChild(cropDiv_top); cropDiv_right = document.createElement('DIV'); cropDiv_right.className = 'crop_transparentDiv'; cropDiv_right.style.visibility = 'visible'; cropDiv_right.style.left = (crop_imageWidth) + 'px'; cropDiv_right.style.top = '0px'; cropDiv_right.style.height = crop_imageHeight + 'px'; cropDiv_right.style.width = '0px'; cropDiv_right.innerHTML = '<span></span>'; crop_imageDiv.appendChild(cropDiv_right); cropDiv_bottom = document.createElement('DIV'); cropDiv_bottom.className = 'crop_transparentDiv'; cropDiv_bottom.style.visibility = 'visible'; cropDiv_bottom.style.left = '0px'; cropDiv_bottom.style.top = (crop_imageHeight) + 'px'; cropDiv_bottom.style.height = '0px'; cropDiv_bottom.style.width = crop_imageWidth + 'px'; cropDiv_bottom.innerHTML = '<span></span>'; crop_imageDiv.appendChild(cropDiv_bottom); cropDiv_dotted = document.createElement('DIV'); cropDiv_dotted.className = 'crop_dottedDiv'; cropDiv_dotted.style.left = '0px'; cropDiv_dotted.style.top = '0px'; cropDiv_dotted.style.width = (crop_imageWidth - (cropToolBorderWidth * 2)) + 'px'; cropDiv_dotted.style.height = (crop_imageHeight - (cropToolBorderWidth * 2)) + 'px'; cropDiv_dotted.innerHTML = '<div></div>'; cropDiv_dotted.style.cursor = 'move'; if (crop_script_browserIsOpera) { var div = cropDiv_dotted.getElementsByTagName('DIV')[0]; div.style.backgroundColor = 'transparent'; cropDiv_bottom.style.backgroundColor = 'transparent'; cropDiv_right.style.backgroundColor = 'transparent'; cropDiv_top.style.backgroundColor = 'transparent'; cropDiv_left.style.backgroundColor = 'transparent'; } cropDiv_dotted.onmousedown = cropScript_initMove; smallSquare_tl = document.createElement('IMG'); smallSquare_tl.src = basedir + '/images/small_square.gif'; smallSquare_tl.style.position = 'absolute'; smallSquare_tl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_tl.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_tl.style.cursor = 'nw-resize'; smallSquare_tl.id = 'nw-resize'; smallSquare_tl.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_tl); smallSquare_tr = document.createElement('IMG'); smallSquare_tr.src = basedir + '/images/small_square.gif'; smallSquare_tr.style.position = 'absolute'; smallSquare_tr.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_tr.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_tr.style.cursor = 'ne-resize'; smallSquare_tr.id = 'ne-resize'; smallSquare_tr.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_tr); smallSquare_bl = document.createElement('IMG'); smallSquare_bl.src = basedir + '/images/small_square.gif'; smallSquare_bl.style.position = 'absolute'; smallSquare_bl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_bl.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_bl.style.cursor = 'sw-resize'; smallSquare_bl.id = 'sw-resize'; smallSquare_bl.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_bl); smallSquare_br = document.createElement('IMG'); smallSquare_br.src = basedir + '/images/small_square.gif'; smallSquare_br.style.position = 'absolute'; smallSquare_br.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_br.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_br.style.cursor = 'se-resize'; smallSquare_br.id = 'se-resize'; smallSquare_br.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_br); smallSquare_tc = document.createElement('IMG'); smallSquare_tc.src = basedir + '/images/small_square.gif'; smallSquare_tc.style.position = 'absolute'; smallSquare_tc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_tc.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_tc.style.cursor = 's-resize'; smallSquare_tc.id = 'n-resize'; smallSquare_tc.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_tc); smallSquare_bc = document.createElement('IMG'); smallSquare_bc.src = basedir + '/images/small_square.gif'; smallSquare_bc.style.position = 'absolute'; smallSquare_bc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_bc.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_bc.style.cursor = 's-resize'; smallSquare_bc.id = 's-resize'; smallSquare_bc.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_bc); smallSquare_lc = document.createElement('IMG'); smallSquare_lc.src = basedir + '/images/small_square.gif'; smallSquare_lc.style.position = 'absolute'; smallSquare_lc.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_lc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_lc.style.cursor = 'e-resize'; smallSquare_lc.id = 'w-resize'; smallSquare_lc.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_lc); smallSquare_rc = document.createElement('IMG'); smallSquare_rc.src = basedir + '/images/small_square.gif'; smallSquare_rc.style.position = 'absolute'; smallSquare_rc.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_rc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_rc.style.cursor = 'e-resize'; smallSquare_rc.id = 'e-resize'; smallSquare_rc.onmousedown = cropScript_initResize; cropDiv_dotted.appendChild(smallSquare_rc); crop_imageDiv.appendChild(cropDiv_dotted); }; function cropScript_initMove(e) { if (document.all)e = event; if (e.target) source = e.target; else if (e.srcElement) source = e.srcElement; if (source.nodeType == 3) // defeat Safari bug source = source.parentNode; if (source.id && source.id.indexOf('resize') >= 0)return; imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1; imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1; imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1; imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1; cropEvent_eventX = e.clientX; cropEvent_eventY = e.clientY; crop_moveCounter = 0; cropScript_timerMove(); return false; }; function cropScript_timerMove() { if (crop_moveCounter >= 0 && crop_moveCounter < 10) { crop_moveCounter++; setTimeout('cropScript_timerMove()', 1); return; } }; function cropScript_initResize(e) { if (document.all)e = event; cropDiv_dotted.style.cursor = 'default'; crop_currentResizeType = this.id; cropEvent_eventX = e.clientX; cropEvent_eventY = e.clientY; crop_resizeCounter = 0; imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1; imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1; imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1; imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1; cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight; if (crop_script_fixedRatio)cropWidthRatio = crop_script_fixedRatio; if (document.all) { var div = cropDiv_dotted.getElementsByTagName('DIV')[0]; div.style.display = 'none'; } cropScript_timerResize(); return false; }; function cropScript_timerResize() { if (crop_resizeCounter >= 0 && crop_resizeCounter < 10) { crop_resizeCounter = crop_resizeCounter + 1; setTimeout('cropScript_timerResize()', 1); return; } }; function cropScript_executeCrop(buttonObj) { buttonObj.style.visibility = 'hidden'; var ajaxIndex = cropScriptAjaxObjects.length; cropScriptAjaxObjects[ajaxIndex] = new sack(); var url = crop_script_server_file + '?image_ref=' + document.getElementById('input_image_ref').value + '&x=' + document.getElementById('input_crop_x').value + '&y=' + document.getElementById('input_crop_y').value + '&width=' + document.getElementById('input_crop_width').value + '&height=' + document.getElementById('input_crop_height').value + '&percentSize=' + document.getElementById('crop_percent_size').value + '&convertTo=' + document.getElementById('input_convert_to').options[document.getElementById('input_convert_to').selectedIndex].value; cropScriptAjaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get cropScriptAjaxObjects[ajaxIndex].onCompletion = function() { cropScript_cropCompleted(ajaxIndex, buttonObj); }; cropScriptAjaxObjects[ajaxIndex].runAJAX(); }; function cropScript_cropCompleted(ajaxIndex, buttonObj) { buttonObj.style.visibility = ''; eval(cropScriptAjaxObjects[ajaxIndex].response); cropScriptAjaxObjects[ajaxIndex] = false; }; function crop_cancelEvent(e) { if (document.all)e = event; if (e.target) source = e.target; else if (e.srcElement) source = e.srcElement; if (source.nodeType == 3) // defeat Safari bug source = source.parentNode; if (source.tagName && source.tagName.toLowerCase() == 'input')return true; return false; }; var mouseMoveEventInProgress = false; function cropScript_mouseMove(e) { if (mouseMoveEventInProgress)return; if (crop_moveCounter < 10 && crop_resizeCounter < 10)return; if (document.all)mouseMoveEventInProgress = true; if (document.all)e = event; if (crop_resizeCounter == 10) { if (crop_currentResizeType == 'e-resize' || crop_currentResizeType == 'ne-resize' || crop_currentResizeType == 'se-resize') { cropDiv_dotted.style.width = Math.max(crop_minimumWidthHeight, (imageDiv_currentWidth + e.clientX - cropEvent_eventX)) + 'px'; } if (crop_currentResizeType == 's-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'se-resize') { cropDiv_dotted.style.height = Math.max(crop_minimumWidthHeight, (imageDiv_currentHeight + e.clientY - cropEvent_eventY)) + 'px'; } if (crop_currentResizeType == 'w-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'nw-resize') { var tmpTop = cropDiv_dotted.style.left.replace('px', '') / 1; var newTop = Math.max(0, (imageDiv_currentLeft + e.clientX - cropEvent_eventX)); if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1)) { newTop = (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1) - crop_minimumWidthHeight; } cropDiv_dotted.style.left = newTop + 'px'; cropDiv_dotted.style.width = (cropDiv_dotted.style.width.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.left.replace('px', '') / 1) + 'px'; } if (crop_currentResizeType == 'n-resize' || crop_currentResizeType == 'nw-resize' || crop_currentResizeType == 'ne-resize') { var tmpTop = cropDiv_dotted.style.top.replace('px', '') / 1; var newTop = Math.max(0, (imageDiv_currentTop + e.clientY - cropEvent_eventY)); if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1)) { newTop = (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1) - crop_minimumWidthHeight; } cropDiv_dotted.style.top = newTop + 'px'; cropDiv_dotted.style.height = (cropDiv_dotted.style.height.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.top.replace('px', '') / 1) + 'px'; } if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight) cropDiv_dotted.style.height = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px'; if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth) cropDiv_dotted.style.width = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px'; if (e.ctrlKey || crop_script_alwaysPreserveAspectRatio)preserveAspectRatio = true; else preserveAspectRatio = false; if (preserveAspectRatio) { var tmpRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight; if (tmpRatio < cropWidthRatio) { cropDiv_dotted.style.width = (cropDiv_dotted.style.height.replace('px', '') / 1 * cropWidthRatio) + 'px'; } else { cropDiv_dotted.style.height = (cropDiv_dotted.style.width.replace('px', '') / 1 / cropWidthRatio) + 'px'; } if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight) { var ratioToAdjust = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1) / (cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2)); if (Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) { cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; } else { cropDiv_dotted.style.top = (crop_imageHeight - cropDiv_dotted.style.height.replace('px', '')) + 'px'; } } if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth) { var ratioToAdjust = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1) / (cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2)); if (Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) { cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px'; } else { cropDiv_dotted.style.left = (crop_imageWidth - cropDiv_dotted.style.width.replace('px', '')) + 'px'; } } } if (!crop_script_fixedRatio && !e.ctrlKey)cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight; } if (crop_moveCounter == 10) { var tmpLeft = imageDiv_currentLeft + e.clientX - cropEvent_eventX; if (tmpLeft < 0)tmpLeft = 0; if ((tmpLeft + imageDiv_currentWidth + (cropToolBorderWidth * 2)) > crop_imageWidth)tmpLeft = crop_imageWidth - imageDiv_currentWidth - (cropToolBorderWidth * 2); cropDiv_dotted.style.left = tmpLeft + 'px'; var tmpTop = imageDiv_currentTop + e.clientY - cropEvent_eventY; if (tmpTop < 0)tmpTop = 0; if ((tmpTop + imageDiv_currentHeight + (cropToolBorderWidth * 2)) > crop_imageHeight)tmpTop = crop_imageHeight - imageDiv_currentHeight - (cropToolBorderWidth * 2); cropDiv_dotted.style.top = tmpTop + 'px'; } var w = cropDiv_dotted.style.width.replace('px', '') / 1; var h = cropDiv_dotted.style.height.replace('px', '') / 1; if (w < 100) { cropDiv_dotted.style.width = '100px'; cropDiv_dotted.style.left = '0px'; } if (h < 100) { cropDiv_dotted.style.height = '100px'; cropDiv_dotted.style.top = '0px'; } repositionSmallSquares(); resizeTransparentSquares(); if (updateFormValuesAsYouDrag)cropScript_updateFormValues(); mouseMoveEventInProgress = false; }; function repositionSmallSquares() { var w = cropDiv_dotted.style.width.replace('px', '') / 1; var h = cropDiv_dotted.style.height.replace('px', '') / 1; smallSquare_tc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_bc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_tr.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_rc.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_br.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_br.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_bc.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_bl.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_lc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; smallSquare_rc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px'; }; function resizeTransparentSquares() { var w = cropDiv_dotted.style.width.replace('px', '') / 1; cropDiv_left.style.width = cropDiv_dotted.style.left; cropDiv_right.style.width = Math.max(0, crop_imageWidth - (cropToolBorderWidth * 2) - (w + cropDiv_dotted.style.left.replace('px', '') / 1)) + 'px'; cropDiv_right.style.left = (w + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) + 'px'; cropDiv_bottom.style.height = Math.max(0, crop_imageHeight - (cropToolBorderWidth * 2) - (cropDiv_dotted.style.height.replace('px', '') / 1 + cropDiv_dotted.style.top.replace('px', '') / 1)) + 'px'; cropDiv_bottom.style.top = (cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) + 'px'; cropDiv_top.style.height = cropDiv_dotted.style.top; cropDiv_bottom.style.left = cropDiv_dotted.style.left; cropDiv_bottom.style.width = (w + (cropToolBorderWidth * 2)) + 'px'; cropDiv_top.style.left = cropDiv_dotted.style.left; cropDiv_top.style.width = (w + (cropToolBorderWidth * 2)) + 'px'; if (cropDiv_left.style.width == '0px')cropDiv_left.style.visibility = 'hidden'; else cropDiv_left.style.visibility = 'visible'; if (cropDiv_right.style.width == '0px')cropDiv_right.style.visibility = 'hidden'; else cropDiv_right.style.visibility = 'visible'; if (cropDiv_bottom.style.width == '0px')cropDiv_bottom.style.visibility = 'hidden'; else cropDiv_bottom.style.visibility = 'visible'; }; function cropScript_updateFormValues() { document.getElementById('input_crop_x').value = Math.round(cropDiv_dotted.style.left.replace('px', '') / 1 * (crop_originalImageWidth / crop_imageWidth)); document.getElementById('input_crop_y').value = Math.round(cropDiv_dotted.style.top.replace('px', '') / 1 * (crop_originalImageHeight / crop_imageHeight)); document.getElementById('input_crop_width').value = Math.round((cropDiv_dotted.style.width.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageWidth / crop_imageWidth)); document.getElementById('input_crop_height').value = Math.round((cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageHeight / crop_imageHeight)); }; function cropScript_stopResizeMove() { crop_resizeCounter = -1; crop_moveCounter = -1; cropDiv_dotted.style.cursor = 'move'; cropScript_updateFormValues(); if (document.all) { var div = cropDiv_dotted.getElementsByTagName('DIV')[0]; div.style.display = 'block'; } }; function cropScript_setCropSizeByInput() { var obj_x = document.getElementById('input_crop_x'); var obj_y = document.getElementById('input_crop_y'); var obj_width = document.getElementById('input_crop_width'); var obj_height = document.getElementById('input_crop_height'); obj_x.value = obj_x.value.replace(/[^0-9]/gi, ''); obj_y.value = obj_y.value.replace(/[^0-9]/gi, ''); obj_width.value = obj_width.value.replace(/[^0-9]/gi, ''); obj_height.value = obj_height.value.replace(/[^0-9]/gi, ''); if (obj_x.value.length == 0)obj_x.value = 0; if (obj_y.value.length == 0)obj_y.value = 0; if (obj_width.value.length == 0)obj_width.value = crop_originalImageWidth; if (obj_height.value.length == 0)obj_height.value = crop_originalImageHeight; if (obj_x.value > (crop_originalImageWidth - crop_minimumWidthHeight))obj_x.value = crop_originalImageWidth - crop_minimumWidthHeight; if (obj_y.value > (crop_originalImageHeight - crop_minimumWidthHeight))obj_y.value = crop_originalImageHeight - crop_minimumWidthHeight; if (obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value / 1; if (obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value / 1; if (obj_x.value / 1 + obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value; if (obj_y.value / 1 + obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value; cropDiv_dotted.style.left = Math.round(obj_x.value / 1 * (crop_imageWidth / crop_originalImageWidth)) + 'px'; cropDiv_dotted.style.top = Math.round(obj_y.value / 1 * (crop_imageHeight / crop_originalImageHeight)) + 'px'; cropDiv_dotted.style.width = Math.round((obj_width.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageWidth / crop_originalImageWidth)) + 'px'; cropDiv_dotted.style.height = Math.round((obj_height.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageHeight / crop_originalImageHeight)) + 'px'; repositionSmallSquares(); resizeTransparentSquares(); }; function cropScript_setBasicEvents() { document.documentElement.ondragstart = crop_cancelEvent; document.documentElement.onselectstart = crop_cancelEvent; document.documentElement.onmousemove = cropScript_mouseMove; document.documentElement.onmouseup = cropScript_stopResizeMove; document.getElementById('input_crop_x').onblur = cropScript_setCropSizeByInput; document.getElementById('input_crop_y').onblur = cropScript_setCropSizeByInput; document.getElementById('input_crop_width').onblur = cropScript_setCropSizeByInput; document.getElementById('input_crop_height').onblur = cropScript_setCropSizeByInput; document.getElementById('crop_percent_size').onblur = cropScript_validatePercent; }; function cropScript_validatePercent() { this.value = this.value.replace(/[^0-9]/gi, ''); if (this.value.length == 0)this.value = '1'; if (this.value / 1 > crop_maximumPercent)this.value = '100'; if (this.value / 1 < crop_minimumPercent)this.value = crop_minimumPercent }; function crop_initFixedRatio() { crop_script_fixedRatio = 1; document.getElementById('input_crop_width').value = Math.round(document.getElementById('input_crop_height').value) / crop_script_fixedRatio; cropScript_setCropSizeByInput(); }; function init_imageCrop(basedir) { cropScript_setBasicEvents(); crop_createDivElements(basedir); cropScript_updateFormValues(); crop_initFixedRatio(); cropDiv_dotted.style.left = '0px'; cropDiv_dotted.style.top = '0px'; cropDiv_dotted.style.width = '100px'; cropDiv_dotted.style.height = '100px'; repositionSmallSquares(); resizeTransparentSquares(); };