纯js通过url获得文件blob，并将文件进行压缩

最新推荐文章于 2025-03-18 16:44:23 发布

vileman

最新推荐文章于 2025-03-18 16:44:23 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.youkuaiyun.com/vileman/article/details/84870485

版权

本文介绍了一种通过URL获取图片并将其转换为Blob对象的方法，利用FileReader API读取图片数据，然后在Canvas上绘制并压缩图片至指定尺寸（540x320），最终将处理后的图片展示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

preView: function (url){
           let reader = new FileReader();
           me.getImageBlob( url , function(blob){
                   reader.readAsDataURL(blob);
           });
           reader.onload = function(e) {
//截取540*320的小图
                   var img2 = new Image();
                   img2.onload = function() {
canvas.width = 540;
canvas.height = 320;
// 清除画布
context.clearRect(0, 0, 540, 320);
// 图片压缩
context.drawImage(img2, 0, 0, 540, 320);
var type = 'image/jpeg';
//将canvas元素中的图像转变为DataURL
var dataurl = canvas.toDataURL(type);
document.getElementById("showPic").src=dataurl;
  };
                   img2.src = e.target.result;
           }
},

//通过url获取图片的Blob值（如果跨域，使用代理、服务器配置等方式）
getImageBlob : function (url, cb) {
       var xhr = new XMLHttpRequest();
       xhr.open("get", url, true);
       xhr.responseType = "blob";
       xhr.onload = function() {
if (this.status == 200) {
               if(cb) cb(this.response);
}
  };
       xhr.send();
}