<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>图片缩放</title>

</head>

<body style="background: black;">

    <input type="file" id="uploadFile"></input>

    <img src="" id='image' style="display: none;">

    <canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;">

        你的浏览器不支持canvas。

    </canvas>

    <input type="range" id="slider" min="0.5" max="3.0" step="0.01" value="1.0" style="display: block;margin: 20px auto;width: 800px;"/>

    <button id='submit' value="上传">上传</button>

</body>

    <script>

       var uploadbtn = document.getElementById('uploadFile');

       var image = '';

       var canvas = document.getElementById("canvas");

        var context = canvas.getContext("2d");

        var slider = document.getElementById("slider");

        var imageObj = new Image(); //定义一个Image对象

            canvas.width = 640;

            canvas.height = 360;

       uploadbtn.onchange = function(){

              var reader = new FileReader();

              reader.onload = function(evt){

                      document.getElementById('image').src = evt.target.result;

                 image = evt.target.result;

                 imageObj.src=evt.target.result; //加载图片

                //需要等image load完再把它画到canvas中，不然的话可能有不良后果

                imageObj.onload = function() {

                    drawImageByScale(slider.value);

                    slider.onmousemove = function(){

                        drawImageByScale(slider.value);

                    };

                };

              }

              reader.readAsDataURL(arguments[0].target.files[0]);

       }

       document.getElementById('submit').onclick = function(){

               var dataurl = canvas.toDataURL('image/png');

            var blob = dataURLtoBlob(dataurl);

            //使用ajax发送

            var fd = new FormData();

            fd.append("file", blob, "image.png");

            var xhr = new XMLHttpRequest();

            xhr.open('POST', 'url', true);

            xhr.send(fd);

       }

           function drawImageByScale(scale){

                   var x_ = document.getElementById("image").width;

                   var y_ = document.getElementById("image").height;

                   if((x_/y_)>(16/9)){

                       var imageWidth = 640 * scale;

                       var imageHeight = 640*y_/x_ * scale;

                   }else{

                       var imageHeight = 360 * scale;

                       var imageWidth = 360*x_/y_ * scale;

                   }

                //画布上的起始点：画布的大小一半减去图像大小的一半。可以为负数，表示在左上角的外面。

                var dx = canvas.width/2 - imageWidth/2;

                var dy = canvas.height/2 - imageHeight/2;

                 //清空画布

                context.clearRect(0, 0, canvas.width, canvas.height);

                //把image画到canvas中，dx、dy表示起始点坐标

                context.drawImage(imageObj, dx, dy, imageWidth, imageHeight);

            }

            function dataURLtoBlob(dataurl) {

                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

                while(n--){

                    u8arr[n] = bstr.charCodeAt(n);

                }

                return new Blob([u8arr], {type:mime});

            }

    </script>

</html>

HTML5：使用Canvas和Input range控件放大缩小图片,剪裁，并上传图片的更多相关文章

  1. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  2. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  3. input(Text)控件作为填空输入,但运行后,有曾经输入的记录显示,用autocomplete="off"解决

    系统中,有设计填空题,原来程序中,用input(Text)控件,   <input type="text" name="NO<%=rs("id&qu ...

  4. jquery检测input checked 控件是否被选中的方法

    jquery检测input checked 控件是否被选中 js部分 复制代码代码如下: function tongyianniu(){ var gouxuan=$('input[type=check ...

  5. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  6. WebView使用input file控件打开相册上传图片

    使用 WebView 直接用 控件选择相册图片 package com.moguzhuan.android.zhuan; import android.annotation.TargetApi; im ...

  7. QlikView TEXT控件固定显示图片

    QlikView 的Text控件不仅可以用来展示文本也可以用来展示图片. 数据表 2个列,一个是 关联字段(Country),另外一个保存图片物理路径. TEXT控件固定显示图片 ,编辑控件表达式 = ...

  8. wpf image控件循环显示图片 以达到动画效果 问题及解决方案

    1>最初方案: 用wpf的image控件循环显示图片,达到动画效果,其实就是在后台代码动态改变Image.Source的值,关键代码: ; i < ; i++)//六百张图片 { Bitm ...

  9. 在RichTextBox控件中插入图片

    . 在RichTextBox控件中插入图片 关键点 . 实现过程 .   public void ShowInsertImageDlg() {     OpenFileDialog OpenFileD ...

随机推荐

  1. /encrypt和/decrypt端点来进行加密和解密的功能

  2. 【bzoj 3489】A simple rmq problem

    题目 \(kdt\)就是数点神器 我们先扫两遍处理出每个数上一次出现的位置\(pre_i,nxt_i\),之后变成\((i,pre_i,nxt_i)\)这样一个三维空间上的点 就变成了求一个立方体的最 ...

  3. vue表格之:summary-method="getSummaries"与show-summary（列求和）

    //表格列求和 <el-table :summary-method="getSummaries" show-summary></el-table> getS ...

  4. swagger请求参数在header中添加token

    网友大部分说的是如下配置 参照配置然而没有作用 注掉改红框内的配置,在方法上加如下注释就可以用 @ApiImplicitParams({ @ApiImplicitParam(paramType = & ...

  5. ant的build.xml备份

    <?xml version="1.0" encoding="UTF-8" ?> <project default="rerun&qu ...

  6. Oracle Database 18c数据库安装步骤

    1.Oracle官网登录下载https://login.oracle.com/mysso/signon.jsp WINDOWS.X64_180000_db_home.zip 2.D盘根目录新建文件夹: ...

  7. day06 tar命令使用，vim简单操作以及linux开机过程

    上节课复习: cat: 查看全部文件内容 head: 从头查看文件内容,默认为前10行 tail: tail -f //动态查看文件是否增加内容 >> 追加 > 覆盖 more: 百 ...

  8. 移动端自定义键盘的vue组件 ----keyboard

    <style scoped lang="less"> .keyboard { /* height: 250px; */ width: 100%; position: f ...

  9. Windows安全证书生成方法（开发者证书）

    首先,查看本机安装的证书可在“运行”中输入:certmgr.msc 一.win8.8.1.win10系统,使用管理员powershell创建证书: (1)利用如下命令来创建证书并获取到其指纹 New- ...

  10. 朴素贝叶斯算法的python实现方法

    朴素贝叶斯算法的python实现方法 本文实例讲述了朴素贝叶斯算法的python实现方法.分享给大家供大家参考.具体实现方法如下: 朴素贝叶斯算法优缺点 优点:在数据较少的情况下依然有效,可以处理多类 ...