热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue2.X+HTML5plus拍照和调用设备相册另附图片转base64和压缩图片方法

HTML5部分<button@click"tesCamera()"type"button":disabled"isshStatus">按钮ces<butt

HTML5 部分

  

  *注意:这里值得注意的是,button标签中一定要写type属性等于button,不然HTML5 plus 会识别不了

JS部分

tesCamera(){
    let that = this;
    //调用原生系统弹出按钮选择框
    let page = null;
    page={ 
        imgUp:function(){ 
            plus.nativeUI.actionSheet(
                {cancel:"取消",buttons:[ 
                {title:"拍照"}, 
                {title:"从相册中选择"} 
            ]}, function(e){
                //1 是拍照  2 从相册中选择 
                switch(e.index){ 
                    case 1:
                    getImage();
                    break; 
                    case 2:
                    appendByGallery();
                    break; 
                    default:
                    break;    
                } 
            }); 
        } 
    }
    // 拍照函数
    function getImage(){
        let cmr = plus.camera.getCamera();
        cmr.captureImage(function(p){
            plus.io.resolveLocalFileSystemURL(p, function(entry){
                var path = entry.toLocalURL();
                //文件传转base64方法
                that.imgPreviewnew(path, _typedata);
            }, function(e){
                console.log("读取拍照文件错误:"+e.message);
            });
        }, function(e){
            console.log("读取拍照文件错误:"+e.message);
        }, {filename:'_doc/camera/',index:1});
    }

    //选择相片文件
    function appendByGallery(){
        plus.gallery.pick(function(path){
            //文件传转base64方法
            that.imgPreviewnew(path, _typedata);
        });
    }
    // 弹出系统选择按钮框  
    page.imgUp();
}

(1).图片转base64函数

imgPreviewnew(file, type){
    let that = this;
    let Orientation;
    let img = new Image();
    img.src = file;
    img.onload = function () {
        //压缩图片函数-输出base64
        let data = that.compress(img,Orientation);
    }
}

 

(2).图片压缩函数

compress(img,Orientation) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext('2d');
    //瓦片canvas
  let tCanvas = document.createElement("canvas");
  let tctx = tCanvas.getContext("2d");
  let initSize = img.src.length;
  let width = img.width;
  let height = img.height;
  //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
  let ratio;
  if ((ratio = width * height / 4000000) > 1) {
    console.log("大于400万像素")
    ratio = Math.sqrt(ratio);
    width /= ratio;
    height /= ratio;
  } else {
    ratio = 1;
  }
  canvas.width = width;
  canvas.height = height;
//        铺底色
  ctx.fillStyle = "#fff";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  //如果图片像素大于100万则使用瓦片绘制
  let count;
  if ((count = width * height / 1000000) > 1) {
    console.log("超过100W像素");
    count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
//            计算每块瓦片的宽和高
    let nw = ~~(width / count);
    let nh = ~~(height / count);
    tCanvas.width = nw;
    tCanvas.height = nh;
    for (let i = 0; i ) {
      for (let j = 0; j ) {
        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
      }
    }
  } else {
    ctx.drawImage(img, 0, 0, width, height);
  }
  //修复ios上传图片的时候 被旋转的问题
  if(Orientation != "" && Orientation != 1){
    switch(Orientation){
      case 6://需要顺时针(向左)90度旋转
          this.rotateImg(img,'left',canvas);
          break;
      case 8://需要逆时针(向右)90度旋转
          this.rotateImg(img,'right',canvas);
          break;
      case 3://需要180度旋转
          this.rotateImg(img,'right',canvas);//转两次
          this.rotateImg(img,'right',canvas);
          break;
    }
  }
  //进行最小压缩
  let ndata = canvas.toDataURL('image/jpeg', 0.1);
  console.log('压缩前:' + initSize);
  console.log('压缩后:' + ndata.length);
  console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
  tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
  return ndata;
}

如果函数有误请在下方评论留言,谢谢^_^

 


推荐阅读
  • 使用Python在SAE上开发新浪微博应用的初步探索
    最近重新审视了新浪云平台(SAE)提供的服务,发现其已支持Python开发。本文将详细介绍如何利用Django框架构建一个简单的新浪微博应用,并分享开发过程中的关键步骤。 ... [详细]
  • 在 Windows 10 中,F1 至 F12 键默认设置为快捷功能键。本文将介绍几种有效方法来禁用这些快捷键,并恢复其标准功能键的作用。请注意,部分笔记本电脑的快捷键可能无法完全关闭。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 掌握远程执行Linux脚本和命令的技巧
    本文将详细介绍如何利用Python的Paramiko库实现远程执行Linux脚本和命令,帮助读者快速掌握这一实用技能。通过具体的示例和详尽的解释,让初学者也能轻松上手。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 本题通过将每个矩形视为一个节点,根据其相对位置构建拓扑图,并利用深度优先搜索(DFS)或状态压缩动态规划(DP)求解最小涂色次数。本文详细解析了该问题的建模思路与算法实现。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 对象自省自省在计算机编程领域里,是指在运行时判断一个对象的类型和能力。dir能够返回一个列表,列举了一个对象所拥有的属性和方法。my_list[ ... [详细]
  • Windows 7 64位系统下Redis的安装与PHP Redis扩展配置
    本文详细介绍了在Windows 7 64位操作系统中安装Redis以及配置PHP Redis扩展的方法,包括下载、安装和基本使用步骤。适合对Redis和PHP集成感兴趣的开发人员参考。 ... [详细]
  • 雨林木风 GHOST XP SP3 经典珍藏版 V2017.11
    雨林木风 GHOST XP SP3 经典珍藏版 V2017.11 ... [详细]
  • 并发编程 12—— 任务取消与关闭 之 shutdownNow 的局限性
    Java并发编程实践目录并发编程01——ThreadLocal并发编程02——ConcurrentHashMap并发编程03——阻塞队列和生产者-消费者模式并发编程04——闭锁Co ... [详细]
  • 本文将详细介绍如何在没有显示器的情况下,使用Raspberry Pi Imager为树莓派4B安装操作系统,并进行基本配置,包括设置SSH、WiFi连接以及更新软件源。 ... [详细]
author-avatar
淡若清芬_920
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有