参考

https://www.runoob.com/html/html5-canvas.html

https://www.cnblogs.com/yuanzhiguo/p/8288822.html

https://www.cnblogs.com/goloving/p/8260206.html

工作中遇到的一个问题，手机端上传图片出现卡顿，经排查发现是图片过大引起的。参考网上资料，整理出一个图片压缩（缩放）的demo页面。

demo包含图片预览，缩放以及生成文件下载三个功能，放在这里备忘，有需要的朋友可以拿去参考。

canvas-preview-and-zoom.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>canvas 预览和缩放</title>

        <style type="text/css">

            .button {

                display: inline-block;

                padding: 0px;

                width: 45px;

                height: 25px;

                line-height: 25px;

                text-align: center;

                font-size: 16px;

                border: solid 1px;

                background: #e3e3e3;

            }

        </style>

    </head>

    <body>

        <div>

            <img style="width: 600px; height: 600px;" id="preview">

            <img style="width: 300px; height: 300px;" id="target">

        </div>

        <div>

            <input type="file" id="select" style="display: none;">

            <label for="select" class="button">选择</label>

            <label type="button" id="zoom" class="button">缩放</label>

            <label type="button" id="download" class="button">下载</label>

        </div>

        <script type="text/javascript">

            var image = document.querySelector('#preview');

            var reader = new FileReader();

            // 预览

            reader.onload = function(e) {

                image.src = e.target.result;

            }

            // 预览

            document.querySelector('#select').addEventListener('change', function(event) {

                if (event.target.files.length == 0) {

                    return;

                }

                file = event.target.files[0];

                if (/^image\//.test(file.type)) {

                    reader.readAsDataURL(file);

                } else {

                    alert('请选择图片');

                }

            });

            // 缩放

            function zoomImage(img, width, height, quality) {

                var canvas = document.createElement('canvas');

                canvas.width = width;

                canvas.height = height;

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

                context.drawImage(img, 0, 0, width, height);

                return canvas.toDataURL('image/jpeg', quality);

            }

            // 缩放

            document.querySelector('#zoom').onclick = function() {

                var img64 = zoomImage(image, 300, 300, 1);

                document.querySelector('#target').src = img64;

            };

            // 下载

            document.querySelector('#download').onclick = function() {

                var a = document.createElement('a');

                a.href = document.querySelector('#target').src;

                a.download = 'zoom.jpg';

                a.click();

                a.remove();

            }

        </script>

    </body>

</html>

使用canvas实现图片预览、缩放（压缩）以及生成文件下载的更多相关文章

  1. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  2. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  3. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  4. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  5. 小程序 canvas实现图片预览，图片保存

    wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...

  6. js实现图片预览、压缩、上传

    先看几个对象:Blob.ArrayBuffer.File.fileReader.formData 详细解释请参考:https://www.cnblogs.com/youhong/p/10875190. ...

  7. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  8. 上传图片转为base64格式预览并压缩图片（不兼容IE9以下浏览器，兼容移动端ios,android）

    前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...

  9. 移动端 H5 拍照 从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

随机推荐

  1. R数据挖掘 第二篇：基于距离评估数据的相似性和相异性

    聚类分析根据对象之间的相异程度,把对象分成多个簇,簇是数据对象的集合,聚类分析使得同一个簇中的对象相似,而与其他簇中的对象相异.相似性和相异性(dissimilarity)是根据数据对象的属性值评估的 ...

  2. linux 通过tar直接打包方式 迁移oracle的软件包环境：rdbms/lib/config.c

    step1.修改sysctl.conf step2.修改ulimit.conf step3.打包源oracle安装包 step4.通过id{oracle的安装运行用户} 获取安装oracle的[ORA ...

  3. SuRF : Practical Range Query Filtering with Fast Succinct Tries

    1. Introduction 在数据库管理系统中查找某些关键字会导致很大的磁盘I/O开销,针对这一问题,通常会使用一个内存开销小并且常驻内存的过滤器来检测该关键字是否存.比如现在常用的bloom过滤 ...

  4. C# winform 启动外部程序

    //class里面放入这段代码[DllImport("shell32.dll")]public static extern int ShellExecute(IntPtr hwnd ...

  5. C# 文件操作总结

    一.需求分析 1.将信息记录到本地记事本中. 2.将记录的信息读取出来. 3.计算出某个文件夹下所有后缀名为txt的数量和dll的数量. 4.从网络上下载文件. 二.二话不说上代码 using Sys ...

  6. SpringBoot 整合MyBatis 统一配置bean的别名

    所谓别名, 就是在mappper.xml配置文件中像什么resultType="xxx" 不需要写全限定类名, 只需要写类名即可. 配置方式有两种: 1. 在 applicatio ...

  7. Java自学-I/O 中文问题

    Java中的编码中文问题 步骤 1 : 编码概念 计算机存放数据只能存放数字,所有的字符都会被转换为不同的数字. 就像一个棋盘一样,不同的字,处于不同的位置,而不同的位置,有不同的数字编号. 有的棋盘 ...

  8. Spring扩展点之BeanFactoryPostProcessor

    前言 BeanFactoryPostProcessor接口是Spring中一个非常重要的接口,它的接口定义如下 public interface BeanFactoryPostProcessor { ...

  9. RabbitMQ高级面试题

    本文涉及:投递失败的消息怎么处理.如何实现延时队列.如何指定消息的优先级.消息的持久化是如何实现的.如何保证消息不丢失 投递失败的消息怎么处理 首先投递失败存在如下两个情况 当交换器无法根据自身的类型 ...

  10. 【转载】UNICODE与ASCII的区别

    原文地址:https://blog.csdn.net/lx697/article/details/5914417 最近的项目涉及到了国际化的问题,由于之前并没有接触到UNICODE编码,因此,在项目期 ...