Question

我最近编写了一个上传图片的脚本。一切都很好。但现在我想在上传后重新调整图像大小。我已经对它进行了一些研究，我想用<canvas>元素进行尝试。我有部分脚本，其他人遗失，我不知道如何连接所有内容。

以下是步骤：

将图片上传到img/uploads - 完成。

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

picupload.php：

$tmp_name = $_FILES['uploadfile']['tmp_name']; $uploaded = is_uploaded_file($tmp_name); $upload_dir = "img/uploads"; $savename = "[several code]";

if($uploaded == 1) { move_uploaded_file ( $_FILES['uploadfile']['tmp_name'] , "$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;
    }
}

用新调整大小的图像替换现有图像。 - 缺少

如果有人能给我一些完成它的提示，那将是非常好的 - 谢谢！

Answer 1

（＃2-3）将源图像调整到画布上

计算适合MAX尺寸而不会溢出所需的比例因子
使用缩放尺寸
缩放原始图像并将其绘制到画布上

重要！确保源图像来自与您的网页相同的域，否则toDataURL将因安全原因而失败。

（＃4）您可以将画布从＃3转换为带有resizedImg.src=context.toDataURL

的图像

示例带注释的代码和演示：

var MAX_WIDTH = 400;        
var MAX_HEIGHT = 300;

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
function start(){

    var canvas=fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT);

    // #4
    // convert the canvas to an img
    var imgResized=new Image();
    imgResized.onload=function(){
        // Use the new imgResized as you desire
        // For this demo, just add resized img to page
        document.body.appendChild(imgResized);
    }
    imgResized.src=canvas.toDataURL();
    
}

// #3
function fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT){

    // calculate the scaling factor to resize new image to 
    //     fit MAX dimensions without overflow
    var scalingFactor=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height))

    // calc the resized img dimensions
    var iw=img.width*scalingFactor;
    var ih=img.height*scalingFactor;

    // create a new canvas
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');

    // resize the canvas to the new dimensions
    c.width=iw;
    c.height=ih;

    // scale & draw the image onto the canvas
    ctx.drawImage(img,0,0,iw,ih);
    
    // return the new canvas with the resized image
    return(c);
}

body{ background-color:white; }
img{border:1px solid red;}

Answer 2

我建议使用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 /中）：

<?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>")

?>

在上传之前使用画布调整图像大小

2 个答案: