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. 2017~ROS暑期学校~分享

    http://www.robotics.sei.ecnu.edu.cn/ROS2017/ ---- 往年暑期学校活动:2015年,2016年 报名开始时间7月2日晚10点:暑期学校报名,机器人挑战赛报 ...

  2. Amazon面试题

    亚马逊面试题: 如下所示的Map中,0代表海水,1代表岛屿,其中每一个岛屿与其八领域的区间的小岛能相连组成岛屿群.写代码,统计Map中岛屿个数. /* Q1. Map [ 0 0 0 0 0 0 0 ...

  3. Thread之七：Object里的wait、notify、notifyAll的使用方法

    wait().notify().notifyAll()是三个定义在Object类里的方法,可以用来控制线程的状态 public final native void notify(); public f ...

  4. python中类变量，成员变量

    参考文献:http://www.jb51.net/article/54286.htm 转载.引用请附上参考文献的链接. (1)位置的区别 先看看下面这段代码: class TestClass(obje ...

  5. 【剑指offer】栈的压入弹出序列，C++实现（举例）

    原创文章,转载请注明出处! 本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1.题目 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为第一个序列的出栈序列.注意 ...

  6. Jenkins构建持续集成

    Jenkins 是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变得可能.现在软件开发追求的是效率以及质量,Jenkins使得自动化成为可能! 亮点 采用shell自定义脚本,控制 ...

  7. [javascript][转载]jQuery获取Select选择的Text和 Value

    原文地址: http://www.cnblogs.com/yaoshiyou/archive/2010/08/24/1806939.html http://www.cnblogs.com/SAL292 ...

  8. 搭建简单Samba服务器

    本文主要实现搭建简单的Samba服务器,使得Windows能访问Linux下的共享目录,为了简单,已经关闭iptables和selinux. 1.安装samba服务器 #yum list all sa ...

  9. LOJ2613 NOIP2013 华容道 【最短路】*

    LOJ2613 NOIP2013 华容道 LINK 这是个好题,具体题意比较麻烦可以直接看LINK中的链接 然后考虑我们可能的移动方式 首先我们需要把白块移动到需要移动块S的附近(附近四格) 然后我们 ...

  10. 快速学习MD5的方法

    MD5加密的Java实现 在各种应用系统中,如果需要设置账户,那么就会涉及到存储用户账户信息的问题,为了保证所存储账户信息的安全,通常会采用MD5加密的方式来,进行存储.首先,简单得介绍一下,什么是M ...