[英]how to set canvas size on inputted height and width in my image editor?
以下是我的图像编辑器的代码和链接。 我想根据用户输入的高度和宽度设置选择区域的大小。 对于前。 如果用户输入宽度300和高度200，则选择尺寸将以此尺寸更改。 还有如何将最小尺寸添加为200 * 200
请查看此链接-http://lifestylewallart.com.au/imageeditor/index.php?pId=2
我只在这里包括了必要的代码。
`<?php require_once '../app/Mage.php'; Mage::app(); $pId = $_REQUEST['pId']; $_product = Mage::getModel('catalog/product')->load($pId); $buy = Mage::helper('checkout/cart')->getAddUrl($_product); $imgUrl = $_product->getImageUrl(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A basic demo of Cropper."> <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development"> <meta name="author" content="Fengyuan Chen"> <title>Editor</title> <link rel="stylesheet" href="assets/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/tooltip.min.css"> <link rel="stylesheet" href="dist/cropper.css"> <link rel="stylesheet" href="main.css"> <script type="text/javascript"> function calculate() { var myBox1 = document.getElementById('box1').value; var myBox2 = document.getElementById('box2').value; var result = document.getElementById('result'); var myResult = [(myBox1 * myBox2 * 0.69)/100]; result.value = parseFloat(myResult).toFixed(2); } </script> </head> <body> <!-- header --> <header class="navbar navbar-inverse navbar-static-top docs-header" id="top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="javascript:void(0);">Image Editor</a> </div> </div> </header> <!-- Content --> <div class="container"> <div class="row"> <div class="col-md-9"> <!-- <h3 class="page-header">Demo:</h3> --> <div class="imageDiv original"> <div class="img-container"> <img src="<?php echo $imgUrl;?>" alt="Picture"> </div> </div> </div> <h3 class="page-header">Price Calculator </h3> <div class="docs-data"> <form name="pricecalculator" id="pricecalculator" method="post" action="<?php echo $buy;?>"/> <div class="input-group"> <label class="input-group-addon" for="dataWidth">Width</label> <input id="box1" type="text" onchange="calculate()"/> <!-- <input type="text" class="form-control" id="dataWidth" placeholder="width"> --> <span class="input-group-addon">cm</span> </div> <div class="input-group"> <label class="input-group-addon" for="dataHeight">Height</label> <input id="box2" type="text" onchange="calculate()"/> <!-- <input type="text" class="form-control" id="dataHeight" placeholder="height"> --> <span class="input-group-addon">cm</span> </div> <div class="input-group"> <label class="input-group-addon" for="dataHeight">Total Price</label> <input id="result" type="text" readonly="readonly" onchange="calculate()"/> <!--<input type="text" class="form-control" id="dataHeight" placeholder="height"> --> <span class="input-group-addon">AUD</span> </div> <input type="hidden" name="pId" id="pId" value="<?php echo $_REQUEST['pId'];?>" /> <input type="button" name="addtocart" id="addtocart" value="Proceed to Checkout"/> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/tooltip.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="dist/cropper.js"></script> <script src="main.js"></script> <script> $( document ).ready(function() { $( "#addtocart" ).click(function() { calculate(); var width = $('#box1').val(); var height = $('#box2').val(); var price = $('#result').val(); var pId = $('#pId').val(); $.post( "addtocart.php", { width:width , height:height , price:price ,pId:pId}) .done(function( data ) { $( "#pricecalculator" ).submit(); }); }); }); </script> </body> </html> `
提前致谢..
因此，如果我是对的，您尝试在第三个空格中简单地显示两个数字的倍数，同时还要检查该数字是否超过或低于某个特定数字。 下面的代码是一个简化的实现（有比使用id更好的方法，但是对于示例来说，这很简单）：
var sizeWidth = document.getElementById("size-width"); var sizeHeight = document.getElementById("size-height"); var sizeSubmit = document.getElementById("size-submit"); var sizeResult = document.getElementById("size-result"); function evaluateSize(){ var surface = sizeWidth.value * sizeHeight.value; sizeResult.textContent = surface; if(surface > 2 && surface < 30){ sizeSubmit.removeAttribute("disabled"); } else { sizeSubmit.setAttribute("disabled", "true"); } } sizeWidth.addEventListener("keyup", evaluateSize, false); sizeHeight.addEventListener("keyup", evaluateSize, false);
<form id="size"> <input type="number" id="size-width" /> <input type="number" id="size-height" /> <p><span id="size-result">0</span> Sqm (min 2, max 30)</p> <input type="submit" id="size-submit" disabled /> </form>
我注意到，您要求人们以厘米为单位输入，但结果以平方米为单位，这令人困惑。 与您的度量单位保持一致！ 既然您拥有,那么无论如何都可以做到！ 这意味着您也可以省略任何REMINDER消息。
这样设置画布是一个完全不同的问题。 您不希望将画布设置为某个宽度，而是要设置画布和一些透明的内容区域...
如何设置图像的高度和宽度，使其适合我在 fabric.js 中的 canvas 的大小？
[英]How do I set both height and width of image so that it can fit the size of my canvas in fabric.js?
生成Canvas宽度和高度属性，使其尺寸与用户输入的尺寸的矩形相同
[英]Generating Canvas width and height attributes to be the same size as a rectangle of user inputted size
是否可以将Canvas ID的width和height属性设置为窗口大小的90％？
[英]Is it possible to set the width and height attributes of a Canvas ID to 90% of the window size?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.