zoukankan      html  css  js  c++  java
  • canvas转换图像格式及尺寸

    1 ///用于上传的图片 
    2 <input type="file" name="imageFile" id="imageFile" />
    3 //压缩按钮
    4      <input type="button"  onclick="change()" value="压缩图"/>

    javaScripts处理:

    window.change = function () {
                  var oFile = document.getElementById('imageFile').files[0];    //读取文件
                  var reader = new FileReader(),
                      img = new Image();
                  ///加载地址
                  reader.readAsDataURL(oFile);
                  reader.onload = function () {        //文件加载完成
                      var url = reader.result;
                      img.src = url;
                  };
                  img.onload = function () {
                      init();
                  }
                  function init() {
                      var w = img.width, h = img.height;
                      var canvas = document.createElement("canvas");
                      var ctx = canvas.getContext('2d');
                      //压缩比例为3
                      canvas.width = w / 3;
                      canvas.height = h / 3;
                      //将图片转化为canvas;并显示出来
                      ctx.drawImage(img, 0, 0, w, h, 0, 0, canvas.width, canvas.height);
    
                      var quality = 0.3;        //图片的质量,这里设置的是0.3
                      var data = canvas.toDataURL("image/png"); //获取画布图片,并且要png格式
                   //下载图片的两个方法
                   //window.location.href = data;   
                      //saveFile(data, new Date().getTime() + ".png");
                      document.body.appendChild(canvas);
                      
                  }
    
                 //下载图片
                  function saveFile(data, filename) {
                      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                      save_link.href = data;
                      save_link.download = filename;
    
                      var event = document.createEvent('MouseEvents');
                      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                      save_link.dispatchEvent(event);
                  };
              }
  • 相关阅读:
    移动端触屏滑动,JS事件
    解决 插件LArea 在IOS上浮出软键盘问题
    关于ajax请求后js绑定事件失效问题解决方法
    Resolving timed out after 2511 milliseconds
    docker 操作 (让容器后台运行程序不退出)
    php导出excel
    yii2 left join 查询
    搭建自用git服务器
    js 复制字符到剪切板
    win10添加软连接
  • 原文地址:https://www.cnblogs.com/x0216u/p/7458474.html
Copyright © 2011-2022 走看看