<!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. JAVA基础_反射获取泛型参数类型

    我经常会想获取参数的实际类型,在Hibernate中就利用的这一点. domain: Person.java public class Person { // 编号 private Long id; ...

  2. 18.scrapy_maitian

    ershoufang.py # -*- coding: utf-8 -*- import scrapy class ErshoufangSpider(scrapy.Spider): name = 'e ...

  3. 关于tomcat配置了虚拟路径，但是在Idea中无法生效的问题

    1. 确认 tomcat 的server.xml 文件中配置的虚拟路径是否正确 其中,path表示访问的虚拟路径,docBase表示真实路径 2. Idea 服务器配置中是否勾选 “Deploy ap ...

  4. POJ - 2406 ~SPOJ - REPEATS~POJ - 3693 后缀数组求解重复字串问题

    POJ - 2406 题意: 给出一个字符串,要把它写成(x)n的形式,问n的最大值. 这题是求整个串的重复次数,不是重复最多次数的字串 这题很容易想到用KMP求最小循环节就没了,但是后缀数组也能写 ...

  5. 3.pycharm spark配置

        pycharm 内的环境变量配置     选择相应的spark程序文件的对应的配置信息       PYSPARK_PYTHON:python的安装路径   PYTHONPATH:spark安 ...

  6. day3-编码、文件、集合、函数、递归

    学习内容: 1. 文件编码 2. 文件 3. 集合 4.函数 5.递归 6.匿名函数 1. 文件编码: 常见的字符串编码有:ASCII 扩展的ASCII Unicode GBK GB2312 GB18 ...

  7. 数论，质因数，gcd——cf1033D 好题！

    直接筛质数肯定是不行的 用map<ll,ll>来保存质因子的指数 考虑只有3-5个因子的数的组成情况 必定是a=pq or a=p*p or a=p*p*p or a=p*p*p*p 先用 ...

  8. LUOGU P3382 【模板】三分法 (三分)

    传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...

  9. android Serializable 和 Parcelable 区别

      android 中自定义的对象序列化的问题有两个选择一个是Parcelable,另外一个是Serializable. 一 序列化原因: 1.永久性保存对象,保存对象的字节序列到本地文件中:2.通过 ...

  10. LintCode_13 字符串查找

    题目 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出现的第一个位置(从0开始).如果不存在,则返回 -1. 您在真实的面 ...