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. 使用fill_n算法

    今天使用这个算法来给一个数组赋值,所以把它的使用过程记录下来: fill_n函数的作用是:给你一个起始点,然后再给你一个数值count和val.把从起始点开始依次赋予count个元素val的值. 注意 ...

  2. RxJava 1.x 笔记：变换型操作符

    在写这几篇 RxJava 笔记时,发现官方文档很久都没有更新啊. 一些前辈两年前写的学习笔记内容跟现在也基本一致,RxJava 2.x 的文档也基本没有,不知道是不是缺实习生. 本文内容为 RxJav ...

  3. android 自定义title 报错 You cannot combine custom titles with other title feat

    solution: http://www.apkbus.com/android-80416-1-1.html http://www.eoeandroid.com/forum.php?mod=viewt ...

  4. 关于HTTPS理论和实践

    Summary: HTTP 通信时,可能信息被监听.服务器或客户端身份伪装等安全问题,HTTPS 则能有效解决这些问题. 原始的HTTP连接的时候,因服务器与用户之间是直接进行明文传输,导致用户面临着 ...

  5. Python 之文件上传

    基于form表单提交 # 需要指定form-data,不能直接拼键值对 可以指定name照片存在位置 views.py from django.shortcuts import render,redi ...

  6. BootStrap FileInput 插件实现多文件上传前端功能

    <!DOCTYPE html> <html> <head> <title>文件上传</title> <meta charset=&qu ...

  7. BZOJ3444 最后的晚餐【细节题+组合数学】*

    BZOJ3444 最后的晚餐 Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人在举行最后的离别晚餐时,饭店老板觉得十分纠结.因为有m名学生偷偷找他,要求和自己暗恋的 ...

  8. js去重复和取重复数据

    js数组中取重复数据的方法: 方法一:去重复数据 <script> Array.prototype.distinct=function(){ var a=[],b=[]; for(var ...

  9. SQL夯实基础（八）：联接运算符算法归类

    今天主要介绍三个常用联接运算符算法:合并联接(Merge join),哈希联接(Hash Join)和嵌套循环联接(Nested Loop Join).(mysql至8.0版本,都只支持Nested ...

  10. flask第七篇——URL与视图函数的映射

    有兴趣的朋友可以添加微信公众号:自动化测试实战 今天开始就要进入正题了.大家都准备好了吧~ 代码提示 先和大家说个小知识点:有同学后台说输入flask代码pycharm不提示,现在告诉你一个解决方法: ...