图片上传 base64数据压缩、降低清晰度方法封装

矫情吗；* 2022-05-08 07:14 649阅读 0赞

>  *  ** 函数简单封装：**
> 
>     function getBase64Image(img) {
>     
>                 var canvas = document.createElement("canvas");
>     
>                 var width = img.width;
>     
>                 var height = img.height;
>     
>                 // calculate the width and height, constraining the proportions
>     
>                 if (width > height) {
>     
>                     if (width > 100) {
>     
>                         height = Math.round(height *= 100 / width);
>     
>                         width = 100;
>     
>                     }
>     
>                 } else {
>     
>                     if (height > 100) {
>     
>                         width = Math.round(width *= 100 / height);
>     
>                         height = 100;
>     
>                     }
>     
>                 }
>     
>                 canvas.width = width;  /*设置新的图片的宽度*/
>     
>                 canvas.height = height; /*设置新的图片的长度*/
>     
>                 var ctx = canvas.getContext("2d");//开启canvas绘图
>     
>                 ctx.drawImage(img, 0, 0, width, height); /*绘图*/
>     
>                 var dataURL = canvas.toDataURL("image/png", 0.8);//降低图片的清晰度
>     
>                 return dataURL.replace("data:image/png;base64,", "");//返回除去data:image/png;base64,的base64数据
>     
>             }
> 
>

发表评论取消回复

表情：

评论列表（有 0 条评论，649人围观）

还没有评论，来说两句吧...

相关阅读

相关 base64图片上传，并显示图片，

<a href="javascript:;" class="file">选择文件 <input type="hidden" id="files-button"

刺骨的言语ヽ痛彻心扉/ 2023年08月17日 16:38/ 0 赞/ 100 阅读

相关 uni-app图片压缩转base64位，多图片上传

之前写过uni-app H5方式上传图片，但是在生成apk后，上传图片失败，不支持app上传。查找资料后解决app上传多图问题。 H5方式上传图片可参考:[uni-appH5

﹏ヽ暗。殇╰゛Y/ 2022年12月05日 10:08/ 0 赞/ 359 阅读

相关【antd Vue】封装upload图片上传组件（返回Base64）

> 最近需要把上传的图片信息存储到数据库，以base64的方式，需要重新封装一下antd的upload组件 1. 使用方法引入组件然后配置一下即可使用，配置项包括

太过爱你忘了你带给我的痛/ 2022年11月04日 05:52/ 0 赞/ 357 阅读

相关图片上传(Base64)

图片上传(Base64) HTML <label for="pic_upload" class="file-update-title"> 标

野性酷女/ 2022年06月17日 11:16/ 0 赞/ 307 阅读

相关 canvas 图片base64压缩

作者：LoveEmperor-王子様 <!DOCTYPE html> <html lang="en"> <head> <meta cha

本是古典何须时尚/ 2022年06月02日 06:41/ 0 赞/ 236 阅读

相关图片上传前压缩，base64图片压缩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

你的名字/ 2022年05月18日 00:58/ 0 赞/ 232 阅读

相关图片上传 base64数据压缩、降低清晰度方法封装

> 函数简单封装： > > function getBase64Image(img) { > > var canva

矫情吗；*/ 2022年05月08日 07:14/ 0 赞/ 650 阅读

相关利用localResizeIMG将图片压缩转为base64上传

在进行图片上传的时候，因为有些图片太大，为了减轻服务器的压力，我们需要将图片进行压缩上传。今天总结一下利用localResizeIMG如何将图片压缩转为base64上传，其中l

我会带着你远行/ 2022年04月12日 11:20/ 0 赞/ 248 阅读

相关 uniapp--上传图片转base64

最近后端接口更新，需要使用图片Base64+图片类型（png/jpg等）上传; 试了好多兼容小程序的方法; 小程序参考[uni-app上传图片转base64\_网络\_

以你之姓@/ 2021年09月13日 16:02/ 0 赞/ 1262 阅读

相关 js实现图片转base64格式,并压缩上传

思路： 1) 调用 FileReader的 reader.readAsDataURL(img)方法, reader.readAsDataURL(file);读取图片信息

短命女/ 2021年07月25日 21:25/ 0 赞/ 808 阅读