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. java.io.IOException: Unable to establish loopback connection

    1.错误描述 Starting preview server on port 8080 Modules: HTML5 (/HTML5) 2017-06-17 11:13:04.823:INFO::ma ...

  2. 【排序】快速排序，C++实现

    原创博文,转载请注明出处! 本文代码的github地址 # 基本思想 ”快速排序“是对”冒泡排序“的改进. 基本原理:基于分治法,在待排线性表中取一个元素pivot作为枢轴值,通过一趟排序将待排线性表 ...

  3. Linux服务器运行环境搭建（三）——MySQL数据库安装

    官网:http://www.mysql.com/ 官网下载地址:http://dev.mysql.com/downloads/mysql/ 说明:官网下载页面的“Select Platform” 选择 ...

  4. silverlight——多次异步调用的顺序执行

    遇到这样一个功能需求,对于后台的同一个服务调用多次,但要求传入的参数能够再一个执行完之后再进行另一个参数的执行. 由于silverlight支持的是异步调用机制,故无法控制服务调用何时返回.那么如果使 ...

  5. Java并发--如何创建线程

    下面是本文的目录大纲: 一.Java中关于应用程序和进程相关的概念 二.Java中如何创建线程 三.Java中如何创建进程 转载原文链接:http://www.cnblogs.com/dolphin0 ...

  6. Java 按行拆分txt

    T028619630|@|聚二零|@|M|@|1983-01-01|@|0|@|110101198301010098|@||@||@||@|湖南省衡阳市耒阳市蔡伦步行街1005号302|@|42100 ...

  7. python mysql基本操作

    1.创建数据库.表添加数据. # -*- coding: utf-8 -*- import MySQLdb.cursors conn =MySQLdb.connect(',charset = 'utf ...

  8. Navicat Premium 连接O​r​a​c​l​e​ ​出现o​r​a​-​1​2​5​0​5​ ​错​误​解​决​方​案

    找到listener.ora文件:我的Oracle是安装在F盘, 路径为:F:\oracle\product\10.2.0\db_1\network\admin\listener.ora  改动前的配 ...

  9. C#类、方法的访问修饰符

    这篇文章主要介绍了C#类的访问修饰符用法,较为详细的分析了C#类的访问修饰符概念与用法,具有一定的参考借鉴价值,需要的朋友可以参考下 本文详细分析了C#类的访问修饰符用法,分享给大家供大家参考.具体用 ...

  10. webpack wepack-dev-server 对应版本

    webpack wepack-dev-server 对应版本 事情起因是使用 extract-text-webpack-plugin 对 css 和 js 打包进出现 Tapable.plugin i ...