上传前用画布调整图像大小 [英] Resize images with canvas before uploading

问题描述

我最近写了一个脚本来上传图片.一切正常.但现在我想在上传后调整图像大小.我对它做了一些研究，我想用 <canvas> 元素尝试一下.我有部分脚本，其他部分丢失，我不知道如何连接所有内容.

I have recently written a script to upload images. Everything works well. But now I want to resize the image after uploading it. I have done some research on it and I want to try it with the <canvas> element. I have parts of the script, others are missing and I don't know how to connect everything.

步骤如下:

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

<input name="uploadfile" type="file" accept="image/jpeg, image/png"><input type="submit" name="btn[上传]">

picupload.php:

picupload.php:

$tmp_name = $_FILES['uploadfile']['tmp_name'];$uploaded = is_uploaded_file($tmp_name);$upload_dir = "img/上传";$savename = "[多个代码]";

if($uploaded == 1){move_uploaded_file ($_FILES['uploadfile']['tmp_name'] ,"$upload_dir/$savename");}

将图像放入画布元素 - 缺失

Put the image into a canvas element - Missing

调整大小 - 我想以某种方式使用的部分代码:

Resize it - Part of the code I want to use somehow:

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

用新的调整大小的图像替换现有图像.- 失踪

Replace the existing image with the new resized one. - Missing

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

It would be very nice if someone would give me some tips to complete it - Thank you!

推荐答案

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

(#2-3) Resizing the source image onto a canvas

• 计算适合 MAX 维度而不会溢出所需的缩放因子
• 创建具有缩放尺寸的新画布
• 缩放原始图像并将其绘制到画布上

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

Important! Be sure the source image is coming from the same domain as your web page or else toDataURL will fail for security reasons.

(#4) 您可以使用 resizedImg.src=context.toDataURL

(#4) You can convert the canvas from #3 to an image with 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;}

这篇关于上传前用画布调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！