图片上传：FileReader获取，Canvas压缩图片

最新推荐文章于 2023-06-17 20:31:36 发布

原创最新推荐文章于 2023-06-17 20:31:36 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #压缩 #图片

Javascript 专栏收录该内容

72 篇文章

订阅专栏

本文提供了一段JavaScript代码示例，演示如何将一个文件对象读取为Data URL，并将其显示在HTML Canvas元素中。该过程包括使用FileReader API读取文件内容、创建图像对象并加载到Canvas上下文中。

直接上代码吧

  var image = document.createElement("img");
    image.file = file;
    var reader = new FileReader();
    var ret = reader.readAsDataURL(file);
 reader.onload = (function(aImg){
    return function(e){
        var img = new Image();
        img.src = e.target.result;
        var canvas = document.createElement("canvas");
        canvas.width="300";
        canvas.height="300";
        ctx = canvas.getContext("2d");
        img.onload= function(){
            ctx.fillRect(0,0,300,300);
            ctx.drawImage(img,0,0,300,300);
            var  _canvas = canvas.toDataURL("image/jpeg", 0.5);
            $("#index").attr("src",_canvas);
        }
    };
}(image));