上傳前用畫布調整圖像尺寸

我最近編寫了一個腳本來上傳圖片。一切運作良好。但是現在我想在上傳後調整圖片大小。我已經做了一些研究，我想用<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; 
    } 
}

用新調整大小的圖像替換現有圖像。 - 遺失

這將是非常好的，如果有人會給我一些提示來完成它 - 謝謝！

來源

2016-07-29 Dan Green

那麼，你是如何上傳你的圖片？ – Adjit

@Adjit我已經添加了;） –

用於抓取圖像 - http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded;爲圖像添加到畫布 - http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas – Adjit

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

來源

2016-07-29 19:03:19 markE

非常感謝！有什麼辦法可以將這個新鏡像自動保存到服務器上嗎？ –

「自動」 - 不。但是您可以使用AJAX上傳調整大小的dataURL（而不是imageObject！）。許多帖子顯示「如何」... [這是其中之一]（http://stackoverflow.com/questions/18736023/cannot-send-canvas-data-from-javascript-ajax-to-php-page/ 18747480＃18747480）。祝你的項目好運！ :-) – markE

我會建議使用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我用不同的方式上傳文件（用於實例我把圖片存儲在本地主機/）：

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

?>

來源

2016-07-29 19:26:59

上傳前用畫布調整圖像尺寸

回答

相關問題