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. [置顶] 滴滴插件化框架VirtualAPK原理解析（一）之插件Activity管理

    上周末,滴滴与360都开源了各自的插件化框架,VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者,在周末就迫不及待的下载了Virtualapk框架来进行研究,本篇博客带来的是Vir ...

  2. Vim技能修炼教程(4) - 基本功

    基本功 前面我们学会了插件管理器和如何实现语法高亮,相信大家已经从中体会到了vim插件的强大功能.现在,是时候回来补一补基本功了. Vi有三种主要模式,正常模式,插入模式和可视化模式.正常我们推荐的方 ...

  3. [置顶] 【机器学习PAI实践七】文本分析算法实现新闻自动分类

    一.背景 新闻分类是文本挖掘领域较为常见的场景.目前很多媒体或是内容生产商对于新闻这种文本的分类常常采用人肉打标的方式,消耗了大量的人力资源.本文尝试通过智能的文本挖掘算法对于新闻文本进行分类.无需任 ...

  4. iOS开发之如何在Xcode中显示断点堆栈

    昨天有人问我在Xcode中打断点后怎么查看堆栈,今天就简单的聊聊. 首先解释一下,什么是堆栈? 堆:顺序随意:栈区(stack)- 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式 ...

  5. [Linux] 终端设置只显示当前目录及终端美化

    1．只显示当前目录 vim ~/.bashrc 找到位置: if [ "$color_prompt" = yes ]; then PS1='${debian_chroot:+($d ...

  6. 关于pycharm的激活码

    http://kadara.ru:1017 http://roothat.ru:1017 http://jetbrains.tencent.clickn http://idea.imsxm.com/  ...

  7. erlang http post 发送数据请求

    ibrowse:send_req("http://127.0.0.1/NativePhone.ashx", [{"Content-Type", "ap ...

  8. window.inner 兼容IE8

    window.getHeight = function() {     if (window.innerHeight != undefined) {         return window.inn ...

  9. appium python实例脚本1

    #coding=utf-8import os, time, unittestfrom appium import webdriver PATH = lambda p:os.path.abspath(o ...

  10. jdbcTemplate的一些常用方法

    前言 最近的项目中由于只进行查询,所以使用了jdbcTemplate来直接操作sql进行持久层的操作,初次接触jdbcTemplate,从最开始的什么都不知道到现在基本方法都大致知道什么意思,特此记录 ...