Javascript 上载前使用画布调整图像大小_Javascript_Html_Image_Canvas

Javascript 上载前使用画布调整图像大小

javascript html image canvas

Javascript 上载前使用画布调整图像大小,javascript,html,image,canvas,Javascript,Html,Image,Canvas,我最近写了一个脚本来上传图片。一切正常。但现在我想在上传后调整图像的大小。我已经对它做了一些研究，我想用元素试试。我有脚本的一部分，其他的都不见了，我不知道如何连接所有的东西以下是步骤：将图像上传到img/上传-完成 picupload.php： $tmp\u name=$\u文件['uploadfile']['tmp\u name']； $uploaded=is_uploaded_文件（$tmp_名称）； $upload_dir=“img/uploads”； $savename=“[若

我最近写了一个脚本来上传图片。一切正常。但现在我想在上传后调整图像的大小。我已经对它做了一些研究，我想用

元素试试。我有脚本的一部分，其他的都不见了，我不知道如何连接所有的东西

以下是步骤：

将图像上传到

img/上传

-完成

picupload.php：

$tmp\u name=$\u文件['uploadfile']['tmp\u name']；
$uploaded=is_uploaded_文件（$tmp_名称）；
$upload_dir=“img/uploads”；
$savename=“[若干代码]”
if（$upload==1）
{
移动上传的文件(
$\u文件['uploadfile']['tmp\u名称']，
“$upload_dir/$savename”）；
}


将图像放入画布元素-缺少
调整大小-我希望以某种方式使用的代码的一部分：
var MAX_WIDTH = 400;        
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.height;

if (width > height) {
    if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
    }
} else {
    if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
    }
}


将现有图像替换为新的已调整大小的图像。-失踪
如果有人能给我一些提示来完成它，那将是非常好的-谢谢
 （#2-3）在画布上调整源图像的大小

计算在不溢出的情况下拟合最大尺寸所需的比例因子
创建具有缩放尺寸的新画布
缩放原始图像并将其绘制到画布上

重要！确保源映像与您的网页来自同一域，否则由于安全原因，toDataURL
将失败
（#4）您可以使用resizedImg.src=context.toDataURL

示例注释代码和演示：

var MAX_WIDTH=400；
var最大高度=300；
var img=新图像（）；
img.crossOrigin='anonymous'；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
函数start（）{
var canvas=fitImageOntoCanvas（img、最大宽度、最大高度）；
// #4
//将画布转换为img
var imgResized=新图像（）；
imgResized.onload=函数（）{
//根据您的需要使用新的IMGRESED
//对于这个演示，只需将调整大小的img添加到页面
文件.正文.附件子项（不适用）；
}
imgResized.src=canvas.toDataURL（）；
}
// #3
函数fitImageOntoCanvas（img、最大宽度、最大高度）{
//计算缩放因子以调整新图像的大小
//适合最大尺寸，无溢出
var scalingFactor=数学最小值（（最大宽度/img.WIDTH），（最大高度/img.HEIGHT））
//计算调整尺寸的img尺寸
var iw=最小宽度*缩放因子；
var ih=模型高度*比例因子；
//创建一个新画布
var c=document.createElement（'canvas'）；
var ctx=c.getContext（'2d'）；
//将画布调整为新尺寸
c、 宽度=iw；
c、 高度=ih；
//缩放并在画布上绘制图像
ctx.drawImage（img，0,0，iw，ih）；
//返回带有已调整大小的图像的新画布
返回（c）；
}
body{背景色：白色；}
img{border:1px solid red；}我建议使用ajax进行上传，因为上传时会重定向到php页面。
但是这个例子我也没有用
参考资料：
    http://stackoverflow.com/questions/12368910/html-display-image-after-selecting-filename

   http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

    http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas 

     http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element

    http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing

以下是我对html的理解
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
    </style>
    <title>Something</title>
</head>
<body>

<form action="picupload.php" method="post" enctype="multipart/form-data">
    <input name="uploadfile" type="file" accept="image/jpeg, image/png">
    <input type="submit">
</form>

</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script>


</script>
</html>


某物

对于PHP，我使用了不同的文件上传方式（例如，我将图片存储在localhost/）中）：
那么，你是如何上传你的图像的？@Adjit我已经添加了它；）用于抓取图像-；为画布添加图像-非常感谢！有没有办法将这个新图像自动保存到服务器上？“自动”--没有。但是您可以使用AJAX上传调整大小的数据URL（而不是imageObject！）。许多显示“如何”的帖子。祝你的项目好运！：-）
<?php

if(isset($_FILES['uploadfile']['name'])){
    $nameFile=$_FILES['uploadfile']['name'];
    $pathFile = "C:/inetpub/wwwroot/" . $_FILES['uploadfile']['name'];

    $file_tmp2=$_FILES['uploadfile']['tmp_name'];
    move_uploaded_file($file_tmp2, $pathFile);
}


echo ("

<!DOCTYPE html>
<html>

<head>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
    <meta charset='utf-8'>
    <style>
    </style>
    <title>Something</title>
</head>
<body>
<canvas id='viewport' ></canvas>
<button onclick='change()'>change</button>
</body>
<script>
var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = '").$_FILES['uploadfile']['name'];
  echo("';
    base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
  }
}


function change(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(base_image, 0, 0, 400 ,300);
}
</script>")

?>