woshizj267 2015-06-24 00:50 采纳率: 50%
浏览 2374
已采纳

如何用JS改变图像的原始大小

# 如何改变图像的真实大小,实现网页上传任意大小的图像?

我想从本地上传一张图片,上传之前我想对其降采样或者放大,我改变image.width和image.height可以让图片以任意大小显示,但是上传的时候任然是上传的原图。

        **想问哈各位大神如何才能真正的改变图片的大小,实现上传任意大小的图片?**

这是我调试的代码:
input id="input_upload" type="file"/ >
canvas id="canvas" style="border:1px solid #c3c3c3;" >

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

$('input[type=file]').change(function(){

    var file=this.files[0];
    var reader=new FileReader();
    var image=new Image();

    reader.readAsDataURL(file);
    reader.onload=function(){
        // 通过 reader.result 来访问生成的 DataURL
        var url=reader.result;
        image.src=url; 
        alert(image.width);
        alert(image.height);
        image.height /=4;
        image.width /=4; 
        canvas.setAttribute("width", image.width+"px");
        canvas.setAttribute("height", image.height+"px");
        alert(image.naturalWidth);
        alert(image.naturalHeight);
        context.drawImage(image,0,0,image.width,image.height);
    };
});
  • 写回答

6条回答 默认 最新

  • danielinbiti 2015-06-24 01:02
    关注

    canvas裁剪后,截屏再上传
    http://segmentfault.com/a/1190000000754560

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

悬赏问题

  • ¥15 yolov8边框坐标
  • ¥15 matlab中使用gurobi时报错
  • ¥15 WPF 大屏看板表格背景图片设置
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是,这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真