上传前使用画布调整图像大小答案

【问题标题】：Resize images with canvas before uploading上传前使用画布调整图像大小
【发布时间】：2016-12-04 12:42:27
【问题描述】：

我最近写了一个脚本来上传图片。一切正常。但现在我想在上传后调整图像大小。我已经对它进行了一些研究，我想尝试使用 <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;
    }
}

用调整后的新图像替换现有图像。 - 缺失

如果有人能给我一些提示来完成它，那就太好了 - 谢谢！

【问题讨论】：

嗯，你是怎么上传你的图片的？
@Adjit 我已经添加了它；）
用于抓取图像 - stackoverflow.com/questions/4459379/…;用于将图像添加到画布 - stackoverflow.com/questions/6011378/how-to-add-image-to-canvas

标签： javascript html image canvas

【解决方案1】：

(#2-3) 在画布上调整源图像的大小

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

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

(#4) 您可以使用resizedImg.src=context.toDataURL 将画布从#3 转换为图像

示例注释代码和演示：

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;}

【讨论】：

非常感谢！有什么方法可以自动将这个新图像保存到服务器？
“自动”——不。但是您可以使用 AJAX 上传调整大小的 dataURL（不是 imageObject！）。许多帖子显示“操作方法”...Here's one of them。祝你的项目好运！ :-)

【解决方案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>")

?>

【讨论】：