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. [Python] 计算dataframe某一文本维度的平均长度

    print np.mean(df.title.apply(lambda x: len(x))) # 24.072694718 print df.title.apply(lambda x: len(x) ...

  2. NSLog 打印出方法函数，行数，内容

    #if DEBUG #define NSLog(FORMAT, ...) fprintf(stderr,"\nfunction:%s line:%d content:%s\n", ...

  3. 那些年提交AppStore审核踩过的坑

    此文刚刚上了CocoaChina的首页:那些年提交AppStore审核踩过的坑  欢迎围观,谢谢大家支持. //add by 云峰小罗,2016.08.04 做iOS开发近5年了,每次提交版本时不可谓 ...

  4. swift 函数参数——实参与形参

    实参 在传入函数之前已有明确定义. 具体定义为 func funcName( actualParameter: Type ) {} 形参 参数只在此函数内有效并可使用,函数外不需要有明确定义. 具体定 ...

  5. 逻辑回归 logistic regression（1）逻辑回归的求解和概率解释

    本系列内容大部分来自Standford公开课machine learning中Andrew老师的讲解,附加自己的一些理解,编程实现和学习笔记. 第一章 Logistic regression 1.逻辑 ...

  6. HDU3555 Bomb 数位DP第一题

    The counter-terrorists found a time bomb in the dust. But this time the terrorists improve on the ti ...

  7. ASP.NET Core 中的Ajax全局Antiforgery Token配置

    前言 本文基于官方文档 <在 ASP.NET Core 防止跨站点请求伪造 (XSRF/CSRF) 攻击>扩展另一种全局配置Antiforgery方法,适用于使用ASP.NET Core ...

  8. [Scala函数特性系列]——按名称传递参数

    通常情况下,函数的参数是传值参数:即参数的值在它被传递给函数之前被确定.但是,如果我们需要编写一个接收参数不希望马上计算,直到调用函数内的表达式才进行真正的计算的函数.对于这种情况,Scala提供按名 ...

  9. Nginx+phpfastcgi下flush 一下子全部输出问题

    最近由于业务需要,需要使用php的flush输出缓存刷新,处理浏览器超时问题. 最初的测试代码如下: ob_start();//打开缓冲区for ($i=10; $i>0; $i--){ ech ...

  10. globalalloc、malloc和new的区别

    简单来说: malloc是c分配内存的库函数,new是c++分配内存的操作符,而globalalloc是win32提供的分配内存的API malloc不能自动调用构造和析构函数,在c++中没什么实用价 ...