该demo放于tomcat下运行，否则出现跨域错误

<!DOCTYPE html>

<html>

   <head>

       <meta charset="utf-8">

   </head>

   <body style="height: 100%; margin: 0">

        <div style="text-align: center;">

            <canvas id="myCanvas" width="" height="" style="border: 1px solid #fff123"></canvas>

            <div>

                <button id="btn" onclick="download()">点我下载</button>

            </div>

        </div>

       <script type="text/javascript">

   let cans=document.getElementById("myCanvas");

    let ctx=cans.getContext("2d");

    let img =new Image();

    img.src="2.jpg";

    img.setAttribute("crossOrigin",'Anonymous');

    img.onload = function(){

    //以Canvas画布上的坐标(10,10)为起始点，绘制图像

    ctx.drawImage(img, , );

    ctx.drawImage(img,,,,);

    ctx.strokeStyle = "#0695FF";        //定义矩形的颜色

    ctx.strokeRect(,,,);

    ctx.strokeRect(,,,);

     };

    function imgType(ty) {

        let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');

        var r = type.match(/png|jpeg|bmp|gif/)[];

        return 'image/' + r;

    }

    function download() {

        let type = 'png';   //设置下载图片的格式

        let img_png_src = cans.toDataURL("image/png");  //将canvas保存为图片

        let imgData = img_png_src.replace(imgType(type),'image/octet-stream');

        let filename = '图片' + '.' + type; //下载图片的文件名

        saveFile(imgData,filename);

    }

    let saveFile = function(data, fileName){

        let save_link = document.createElement('a');

        save_link.href = data;

        save_link.download = fileName;

        let event = document.createEvent('MouseEvents');

        event.initEvent("click", true, false);

        save_link.dispatchEvent(event);

    };

       </script>

   </body>

</html

一个canvas的demo的更多相关文章

  1. 我的第一个 react redux demo

    最近学习react redux,先前看过了几本书和一些博客之类的,感觉还不错,比如<深入浅出react和redux>,<React全栈++Redux+Flux+webpack+Bab ...

  2. 1.类的加载机制_继承类的加载(一个小的Demo)说明

    今天我们先来一个小的Demo来了解类的加载顺序. public class ClassLoaderTest { public static void main(String[] args) { Sys ...

  3. 第一个ajax小demo

    第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657

  4. 手把手教你使用 js 实现一个 Canvas 编辑器

    手把手教你使用 js 实现一个 Canvas 编辑器 拖拽 缩放,等比缩放 导出 image 模版 撤销,重做 OOP,封装,继承,多态 发布库 CI/CD (gitlab/github) ... h ...

  5. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  6. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  7. 无废话WCF入门教程六[一个简单的Demo]

    一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...

  8. 一起来花5分钟写一个PHP入门Demo

    最近公司招了几个应届毕业生,他们对前端的了解还挺多,但是对后端的技术一无所知,我觉得,作为一个前端攻城狮,如果你有远大的抱负,就应该雨露均沾... 今天我就跟大家讲一讲PHP最基本的入门,至少别人问起 ...

  9. 使用angular.js开发的一个简易todo demo

    前沿 在CVTE实习考察的一周里,接触到了angular,并在最后的一天任务里要求使用angular做一个功能主要包括创建.编辑.恢复.删除以及留言的todo demo,并支持响应式布局.因为之前没怎 ...

随机推荐

  1. lua中产生 1 - n 之间不重复随机数

    local function GetRandomNumList(len) local rsList = {} ,len do table.insert(rsList,i) end local num, ...

  2. Python生成pyd文件

    Python的脚本文件是开源的,量化策略的安全性没有保障.因此需要保护源码.那么要对Python代码进行混淆.加密保护. 混淆代码,我准备使用pyminifier.而加密处理,就比较麻烦. Pytho ...

  3. 虚拟机vmnet0、vmnet1和vmnet8的区别

    vmnet0,实际上就是一个虚拟的网桥 vmnet0,实际上就是一个虚拟的网桥,这个网桥有很若干个端口,一个端口用于连接你的Host,一个端口用于连接你的虚拟机,他们的位置是对等的,谁也不是谁的网关. ...

  4. Linux中apt与apt-get命令的区别与解释

    2019-01-15 14:35:39 随着 apt install package 命令的使用频率和普遍性逐步超过 apt-get install package,越来越多的其它 Linux 发行版 ...

  5. php如何控制客户端生成缓存

    php如何控制客户端生成缓存 一.总结 一句话总结:用http消息响应头中的Cache-Control来控制客户端缓存,说的是页面本身被客户端缓存,而不是重新生成的其它的非页面缓存 响应头Cache- ...

  6. Shell Trap信号管理

    trap命令用于指定在接收到信号后将要采取的动作.常见的用途是在脚本程序被中断时完成清理工作.不过,这次我遇到它,是因为客户有个需求:从终端访问服务器的用户,其登陆服务器后会自动运行某个命令,例如打开 ...

  7. python记录_day31 进程同步和进程通信

    一.进程同步 1.同步锁(又叫互斥锁) 加锁的代码以后,同一时间内只能被一个进程执行 from multiprocessing import Process, Lock def fun(loc): l ...

  8. 在word中粘贴的图片为什么显示不完整

    一.背景 整理系统测试说明文档,截得图片粘贴到word中显示不完整. 二.错误问题 问题:在word中粘贴的图片为什么显示不完整,如图所示: 三.分析问题: 原因是原来设置的行间距是固定值,图片也作一 ...

  9. 『MXNet』第九弹_分类器以及迁移学习DEMO

    解压文件命令: with zipfile.ZipFile('../data/kaggle_cifar10/' + fin, 'r') as zin: zin.extractall('../data/k ...

  10. mysql创建存储过程，批量建表分表00到99

    这里以sqlyong为软件示例: --创建存储过程DELIMITER $$ CREATE PROCEDURE `createTablesWithIndex`() BEGIN DECLARE `@i` ...