html代码

<canvas id="canvas" width="100" height="100" ></canvas>
js 代码
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fileStyle="gray";
ctx.fillReact(0,0,100,100);

1.直接调用canvas对象的toDataURL方法转化为指定类型

var newImg = new Image();
newImg.src=canvas.toDataURL("image/png"));

2.利用canvas对象的toBlob方法

先通过toBlob将canvas对象转化为二进制对象,通过参数形式传入函数,然后利用URL.createObjectURL方法根据传入的参数创建一个指向该参数blob对象的url,然后把url赋给img的src属性即可
canvas.toBlob && canvas.toBlob(function(blob) {
  var url = URL.createObjectURL(blob);
  var newImg = new Image();
  newImg.onload = function() {
    URL.revokeObjectURL(url)
  };
  newImg.src=url;
};
 URL.revokeObjectURL()方法会销毁一个通过URL.createObjectURL()创建的对象URL. 当你要把url赋给newImg之后,并且浏览器已经onload成功这个img,那么此时就再不需要指向blob对象的url,这个时候就应该把这个对象销毁掉,避免占用内存。

canvas导出图片方法总结的更多相关文章

  1. html页面、canvas导出图片

    背景:项目现场提出将一个html做的图形页面导出为一张图片的需求,在网上搜了一下,发现都不是很全面,所以综合了很多大神的帖子,自己再次封装,以适用项目需求. 所需js库:html2canvas.js( ...

  2. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  3. 微信小程序 canvas导出图片模糊

    //保存到手机相册save:function () { wx.canvasToTempFilePath({ x: , y: , width: , //导出图片的宽 height: , //导出图片的高 ...

  4. canvas画布导出图片并下载

    近期在学习关于画布知识,关于 画布导出图片, 在导出jpeg格式的图片时,会发现图片背景色变成了黑色,原因是画布透明的地方 默认转成了黑色,可以在绘制画布前设置透明处背景色为白色. // 背景色转换成 ...

  5. php保存canvas导出的base64图片

    代码如下: <?php $img='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABxCAYAAABoUdWRAAAAAXNSR0IAr ...

  6. Activiti开发案例之activiti-app工作流导出图片

    前言 自从 Activiti 和 JBPM4 分家以后,Activiti 目前已经发展到了版本7,本着稳定性原则我们最终选择了6,之前还有一个版本5. 问题 在开发使用的过程中发现 Activiti ...

  7. canvas压缩图片

    1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...

  8. canvas压缩图片变模糊问题

    canvas 画图图片变模糊问题 问题描述 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了 canvas 画图线条变粗 问题产生原因 该问题在 PC 下面并不会产生,原因 ...

  9. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

随机推荐

  1. 人人都是 DBA(XIV)存储过程信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  2. Do带你解析:原生APP与web APP的区别

    对于DeviceOne原生跨平台APP与WEB APP的区别,很多人还不是很清楚,下面就让小编来简单介绍DeviceOne原生APP的功能以及与WEB APP的区别. 定义,什么是原生APP和web ...

  3. js作用域问题一步步透彻理解

    黄金守则第一条: js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到. first try: 这是为什么呢?? var a ...

  4. Technical news July-11

    http://blog.jobbole.com/73300/ 对比Ruby和Python的垃圾回收(2):代式垃圾回收机制 http://www.microsoftvirtualacademy.com ...

  5. Git学习笔记(9)——自定义配置

    本文主要记录了Git的一些易用化的配置和别名的使用 配置Git的命令输出带有颜色,更加醒目 //配置输出颜色 $ git config --global color.ui true //取消输出颜色 ...

  6. Git学习笔记(8)——标签管理

    本文主要记录的Git标签的作用.标签的多种创建方式,以及标签的删除,与推送,和使用GitHub的Fork参与别人的项目. 标签的作用 发布版本时,通常先在版本库中打一个标签,这样,就唯一确定了打标签时 ...

  7. .net版本发展历史

    最近装上了VS2013,发现好多新特性.新功能,公司办公还在使用VS2005.VS2008,不过用着也很顺手,在最新版Visual Studio中,微软加入了git源码管理工具,和之前的TFS大体上类 ...

  8. IOS Animation-CAKeyframeAnimation例子(简单动画实现)

    在阅读本文之前,可以看看 CABasicAnimation的例子 也可以看看IOS Animation-CABasicAnimation.CAKeyframeAnimation详解&区别&am ...

  9. EF架构~充血模型设置不被持久化的属性

    回到目录 在Poco实体中,一般只有属性没有方法,这在软件设计中称为贫血模型,而在DDD领域驱动设计中,比较提倡充血模型,即你的Poco实体中,即有属性,也有操作属性的方法,注意这里说的是操作属性的方 ...

  10. css 文本溢出显示省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...