Изменить размер изображения с холстом перед загрузкой

Question

Я недавно написал сценарий для загрузки изображений. Все работает хорошо. Но теперь я хочу изменить размер изображения после его загрузки. Я провел некоторое исследование, и я хочу попробовать его с помощью элемента <canvas>. У меня есть части скрипта, другие отсутствуют, и я не знаю, как соединить все.

Эти шаги:

1. Загрузить изображение в 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"); }

2. Поместите изображение в холст элемент - Отсутствует

3. Измените размер - Часть кода I хотите как-то использовать:

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

4. Замените существующее изображение на новое изменение размера. - Отсутствует

Было бы очень приятно, если бы кто-то дал мне несколько советов, чтобы завершить его - Спасибо!

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

?>