移动前端图片压缩 + Dom元素保存成图片

最新推荐文章于 2024-05-21 16:31:39 发布

飞扬_柳絮

最新推荐文章于 2024-05-21 16:31:39 发布

阅读量913

点赞数

分类专栏： JavaScript 文章标签：移动压缩

本文链接：https://blog.csdn.net/tjcjava/article/details/78552379

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

移动端压缩图片并且上传基本流程：
　1、input file上传图片时，用URL方法将file赋值给img对象
　2、将img绘制到canvas上，调用canvas.toDataURL对图片进行压缩
　3、获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再上传
上代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <title>移动前端图片压缩上传</title>
     <style>
       *{margin:0; padding:0;}
     </style>
  </head>
  <body>
  	<div id="app">
  	    <p>{{message}}</p>
  	    <input type="file" accept="image/*" @change="getImage"/>
  	</div>
  
    <script src="vue.js"></script>
    <script>

    //创建一个Vue实例(ViewModel): 负者连接View与Model
    let app = new Vue({
      el: '#app',
      data: {message: '图片压缩!'},
      methods: {
        /*第一步：获取 file 对象, file --> img*/
        getImage: function(event){
          let self = this;
          let file = event.target.files[0];
          let img = new Image();
          /*img.src 如果用FileReader异步读取获取file的base64数据赋值，在
            移动端base64数据过大时，会导致赋值过程很慢*/
          img.src = URL.createObjectURL(file);
          img.onload = function(){
              self.imgToCanvas(img);
          }
        },
        /*第二步：img -->canvas,调用canvas.toDataURL压缩,返回压缩后的base64数据*/
        imgToCanvas: function(img){
          let self = this;
          //ios 拍摄的照片大于5M时，同比例缩小
		  let width = img.width;
          let height = img.height;
          let ratio  = width*height/5000000;
          if(ratio > 1){
              ratio = Math.sqrt(ratio);
              width /= ratio;
              height /= ratio;
          }else{
              ratio = 1;
          }
          let cvs = document.createElement('canvas');
          let ctx = cvs.getContext('2d');
          ctx.drawImage(img,0,0,width,height);
         //压缩比例：0.5,可根据实际情况设置
          let compressData = cvs.toDataURL('image/jpeg',0.5); //  访问的网站域名与服务器域名一致
          /*计算压缩后文件大小：22 base64前缀  2 base64最后的2个等号
            dataStr/8*2: base64字符流每8个字符有2个0补充
            let dataStr = compressData.substring(22).length-2;
            console.log(parseInt(dataStr-(dataStr/8)*2));*/
          self.upload(compressData);
        },
        /*第三步：上传压缩后的图片数据*/
        upload: function(){

        }
      }
    });
    </script>
  </body>
</html>

Dom元素保存成图片

// 图片保存到本地（必须同源：访问的网站域名与服务器域名一致）
downs() {
  let alink = document.createElement("a");
  alink.href = this.shop.shoppic_url;
  alink.download = "pic"; // 图片名
  alink.click();
}
// 图片保存到本地(不同源)
downloadIamge(imgsrc, name) {//下载图片地址和图片名
  var image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    var a = document.createElement("a"); // 生成一个a元素
    var event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
},
downs(){
  this.downloadIamge(this.pic.url, 'pic')
}

参考： https://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/
https://blog.csdn.net/qq_30100043/article/details/78462950
https://segmentfault.com/a/1190000011478657

飞扬_柳絮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动前端图片压缩 + Dom元素保存成图片

移动端压缩图片并且上传基本流程：　1、input file上传图片时，filereader读取上传的图片数据（base64格式）　2、将图片数据传入img对象，然后把img绘制到canvas上，调用canvas.toDataURL对图片进行压缩　3、获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再上传上代码：&lt;!DOCTYPE html&gt;&lt;html&gt;
复制链接

扫一扫

专栏目录