首页 > 其他分享 >vant上传图片时压缩图片

vant上传图片时压缩图片

时间:2023-03-02 09:13:24浏览次数:36  
标签:10 canvas vant img content let file 上传 图片

afterRead(file){
        console.log(file,'0000')
        this.face = [];
        let canvas = document.createElement('canvas') // 创建Canvas对象(画布)
        let context = canvas.getContext('2d')
        let img = new Image()
        img.src = file.content // 指定图片的DataURL(图片的base64编码数据)
        img.onload = () => {
          canvas.width = img.width/10
          canvas.height = img.height/10
          context.drawImage(img, 0, 0, img.width/10, img.height/10)
          file.content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量
          console.log(file,file.content,'4444444')
          let files = this.dataURLtoFile(file.content, file.file.name)
          console.log(files,'33333')
          this.uploadToqiniu(files,this.face);
        }
      },
dataURLtoFile (dataurl, filename) { // 将base64转换为file文件
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, {type: mime})
      },

 

标签:10,canvas,vant,img,content,let,file,上传,图片
From: https://www.cnblogs.com/Ma-YuHao/p/17170600.html

相关文章

  • 关于本地项目上传到gitlab
    两种方式的说明,如果是以学习的目的,建议使用第一种方式;如果是为了快速把代码上传到gitlab,建议使用第二方式;查看git配置的命令,注意:不同的目录,配置项也不尽相同:gitconfig--......
  • 帝国CMS 7.5编辑器从WORD中粘贴过来无法保留格式和图片的解决办法
    1.配置过滤js文件首先打开 \e\admin\ecmseditor\infoeditor\plugins\pastefromword\filter\default.js 在文件的最后部分又如下代码(修改前的代码),也可以搜索CKEDITOR.cle......
  • IDEA 上传项目到 Gitee 小记
    此方式可直接将IDEA中项目上传到Gitee仓库,无需打开Gitee手动创建空仓库。前提环境安装好Git,并在IDEA中成功配置;注册有Gitee账号,并记得账号密码;IDEA中安......
  • 多平台图片相似度检测算法
    目录多平台图片相似度检测算法Android.NETPython多平台图片相似度检测算法甲方最终选择的是:平均值检测算法Android使用的是opencv-3.4.15.aartry......
  • QT QGraphicsView 如何实现图片按照鼠标点进行放大缩小效果
    原文链接#include<QScrollBar>//获取当前鼠标相对于view的位置;QPointFcursorPoint=event->pos();//获取当前鼠标相对于scene的位置;......
  • js 通过图片链接下载到本地
    1letimage=newImage();2image.setAttribute("crossOrigin","anonymous");3image.src=url;4image.onload=()=>{......
  • Python 图片转PDF
    直接给接口吧↓用到的库:fpdf,PyPDF2importfpdfdefpicture2pdf(pic_path,output_path,vertical=False,format='A4'):#生成只有一页且铺满源图片的PDFp......
  • 如何实现一个公共组件库上传到npm并在项目中使用
    一般多个项目使用一些公共组件的时候,我们没必要在每个项目里写公共组件代码,我们可以将公共组件封装成一个库,上传至npm,这样我们在项目中使用就可以直接从npm下载直接使用。当......
  • dokuwiki支持QQ截图上传
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java"......
  • 搭建stable-diffusion-webui环境,使用ai生成图片
    首先python版本要求:Python3.10 第一步下载框架代码:https://github.com/AUTOMATIC1111/stable-diffusion-webui.gitgithub慢的话把域名换成https://kgithub.com/ ......