canvas下载图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        canvas{ border: 1px solid black; }

    </style>

</head>

<body>

    <canvas id="myCanvas" width="500" height="500"></canvas>

    <a download="canvas.jpg" href="" onclick="downloadpic(this);">下载图片</a>

    <script>

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

        var ox = canvas.width / 2;

        var oy = canvas.height / 2;

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

        ctx.font = "42px serif";

        ctx.textAlign = "center";

        ctx.textBaseline = "middle";

        ctx.fillText("Hello World", ox, oy);

        function downloadpic(e) {

            var image = canvas.toDataURL("image/jpg", 1);

            e.href = image;

        };

    </script>

</body>

</html>

canvas下载图片的更多相关文章

  1. 浏览器 canvas下载图片 网络错误

    在使用html2canvas截取页面的时候发现图片死活保存不到本地,chrome一直报“网络错误”, 主要出现这个问题是canvas保存图片到本地时各个浏览器像素的限制不同, 所以将图片数据转换成Bl ...

  2. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

  3. 解决 canvas 下载含图片的画布时的报错

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

  4. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  5. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  6. canvas转图片

    <script>   var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100;       window.onload ...

  7. js 根据url 下载图片

    downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttr ...

  8. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  9. Jszip的使用和打包下载图片

    因为canvas总结到后面又想到了jszip的一些事情,那就索性也回去看看吧.试过,至少谷歌和火狐都是支持jszip的. 1.  jszip的使用 官方文档说的很清楚了,而且也有读取zip文件.生成z ...

随机推荐

  1. postfix邮件服务器搭建04-终结篇

    本来是计划对postfix做一个全系列的安装文档的,不过在查某个知识点的时候,偶然找到一个已经写好的postfix全系列文章,在全部看完之后惊为天人,我认为:总体上会比我要写的要好,所以我准备借用一下 ...

  2. Matlab以MEX方式调用C源代码【转载】

    原文地址:http://blog.sina.com.cn/s/blog_468651400100coas.html 这是自己整理的一个对应的文档:<Matlab以MEX方式调用C源代码> ...

  3. wait() ,notify() ,notifyAll(),synchronized 和同步方法锁,对象锁的联系,关系,区别；

    一直不明白一个问题,因为在书上关于生产者和消费者的例子里看到一段这样的代码,估计很多人都和我一样迷惑 public synchronized void set(String name, String ...

  4. Unity Obstacle分析

    NavMeshObstacle Normal 通过设置半径和高度来设定障碍物,配合NavMesh使用. 优点: 简单易用,效率高 动态生成 缺点: 可能会被主角穿过,但目前没发现 形状固定为圆柱 Na ...

  5. BZOJ1801 Ahoi2009 chess 中国象棋 【DP+组合计数】*

    BZOJ1801 Ahoi2009 chess 中国象棋 Description 在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮. 请问有多少种放置方法,中国像棋中炮的行 ...

  6. BZOJ4245 ONTAK2015 OR-XOR 【位运算+贪心】*

    BZOJ4245 ONTAK2015 OR-XOR Description 给定一个长度为n的序列a[1],a[2],…,a[n],请将它划分为m段连续的区间,设第i段的费用c[i]为该段内所有数字的 ...

  7. asp.net core microservices 架构之 分布式自动计算（一）

       一:简介   自动计算都是常驻内存的,没有人机交互.我们经常用到的就是console job和sql job了.sqljob有自己的宿主,与数据库产品有很关联,暂时不提.console job使 ...

  8. Machine Schedule（二分图匹配之最小覆盖点，匈牙利算法）

    个人心得:二分图啥的一点都不知道,上网借鉴了下,请参考http://blog.csdn.net/thundermrbird/article/details/52231639 加上自己的了解,二分图就是 ...

  9. Kalman Filter

    本质是一种最优估计法.  核心是"预测"+"测量反馈". 一个视频: http://blog.sina.com.cn/s/blog_461db08c0102uw ...

  10. spring boot 使用spring.resources.static-locations 分离系统模版&&资源文件

    方便我们将资源配置以及模版&&静态文件分离出来,而不是打包在一起,比如以下的一个demo 参考配置: server.port=8006 spring.application.name= ...