<!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. uploadify上传附件 点击保存无效 切F12就可以正常保存

    感谢 这篇文章    https://blog.csdn.net/koala25/article/details/70230046 uploadify上传附件 点击保存无效 切F12就可以正常保存了, ...

  2. Java基础拾遗(二) — 关于equals()，hashcode()和 ==

    这里分别讲==和equals()的关系,以及equals()和hashcode()的关系 讲解之前,需要先明白对象的内容.对象的引用,基本类型,引用类型这几个概念,此处不做解释 一.==和equals ...

  3. MyBatis的核心API

    MyBatis核心Api 上次简单的写了一个MyBatis的简介以及编写了一个MyBatis的入门程序,但是在入门程序中出现多很多比较陌生的词,比如SqlSessionFactoryBuilder.S ...

  4. JS控制语句 编程练习 学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。

    编程练习 在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...

  5. Python全栈开发：socket代码实例

    客户端与服务端交互的基本流程 服务端server #!/usr/bin/env python # -*- coding;utf-8 -*- import socket sk = socket.sock ...

  6. Func-Chain.js 另一种思路的javascript异步编程解决方案

    本文转载自:https://www.ctolib.com/panruiplay-func-chain.html Func-Chain.js 另一种思路的javascript异步编程,用于解决老式的回调 ...

  7. Django之深入了解ORM

    目录 Django ORM操作 常用字段 常用字段参数 自定义字段 单表操作 双下划线查询 模糊查询 多表操作 一对多字段数据的操作 多对多字段数据的操作 跨表查询 基于对象的跨表查询 基于双下划线的 ...

  8. Ionic3 demo TallyBook 实例2

    1.添加插件 2.相关页面 消费页面: <ion-header> <ion-navbar> <ion-title> 消费记录 </ion-title> ...

  9. 小程序关闭时暂停webview里的音乐

    document.addEventListener("visibilitychange", () => {  if(document.hidden) {     // 页面被 ...

  10. (转)剖析Linux文件编码的查看及修改

    Linux文件编码的查看和修改都有不止一种做法,如果你需要在Linux中操作windows下的文件,那么很可能会经常遇到文件编码转换的问题,如何进行这项工作,也应该是经常工作在双系统下的操作者的必须掌 ...