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. Vim技能修炼教程(14) - 写个ex命令吧

    写个ex命令吧 我们第二节开始就写了语法高亮的插件.这一节,我们学习第二种插件的写法,就是写个我们自己的ex命令. 自定义ex命令的命令是:command,我们在~/.vim/下建立一个plugin目 ...

  2. iOS开发之解决CocoaPods中“.h”头文件找不到的问题，简单粗暴的方法

    如果是拖进工程中的framework或者第三方文件,如果找不到,删除了重新添加或者修改search path地址,如果不知道怎么修改,在工程文件夹中,找到对应的文件,然后将文件拖到修改文件地址的位置, ...

  3. nginx and node.js配合使用 helloworld

    nginx是最好的反向代理服务器. Node.js是... 好吧 ,不介绍了,猛击这里 现在小介绍下怎么用nginx和node.js配合使用. 先写个helloworld.js var http =  ...

  4. Linux shell multifile content replace with sed

    #!/bin/bash # Linux shell multifile content replace with sed # 声明: # 本源代码主要是利用两份(中.英文)具有相同键值对的json数据 ...

  5. Adobe Acrobat 9 Pro破解方法

    首先安装Adobe Acrobat 9 Pro,默认安装在C盘. 如果你的系统盘是C盘,那么就删除:c:/Documents and Settings/All Users/Application Da ...

  6. Tomcat 运行 idea 编译好的 .class JavaWeb 项目

    对于新手来说,对于项目部署,有时候就是以为拷贝在idea控制台里面跑的项目放到tomcat里面的webapps里面跑就可以了,这仅仅限于静态项目..... 他不像PHP , 修改源码直接可以跑, 而J ...

  7. 《DSP using MATLAB》示例 Example 9.6

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  8. 关于Visual studio 2017安装方法的若干问题

    因为忙于生活,好几年没有看关于编程方面的书了,这几天闲,就准备在电脑上装上VS的最新版本,查了查,最新版是VS2017,.搜了下网上安装后大小,还真不小.下载离线安装包,完全下载居然需要25G左右,无 ...

  9. 以gevent(协程) 方式跑uwsgi服务

    当你的系统存在一些IO或网络请求较久的操作时, 如果以默认的方式启动uwsgi服务, 那么如果这类请求过多的时候, 所以进程被卡死. uwsgi就无法再对后续请求做处理了. 这时可以用gevent的方 ...

  10. 从数据库导出数据到excel之POI操作

    项目说明: 1:数据库中有两张表,主键关联 2:根据条件查询数据 3:处理为需要的数据封装类型,然后传到导出excel的方法中 <--框架部署就不详谈了,用的spring框架--> 补充: ...