下面是我的图像编辑器的代码和链接。我想在用户输入的高度和宽度上设置选择区域大小。 对于前。 如果用户输入宽度 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>我注意到您要求人们以厘米为单位输入，但结果以平方米为单位，这令人困惑。与您的测量单位保持一致!既然你有 , 无论如何，让它全是厘米!这意味着您还可以省略任何提醒消息。
如此设置 Canvas 完全是一个不同的问题。您不是要将 Canvas 设置为特定宽度，而是要设置 Canvas 和一些透明内容区域...
关于javascript - 如何在我的图像编辑器中根据输入的高度和宽度设置 Canvas 大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32666728/