核心代码：
<script type="text/javascript">

  // Converts image to canvas; returns new canvas element

  function convertImageToCanvas(image) {

    var canvas = document.createElement("canvas");

    canvas.width = image.width;

    canvas.height = image.height;

    canvas.getContext("2d").drawImage(image, 0, 0);

    return canvas;

  }

  // Converts canvas to an image

  function convertCanvasToImage(canvas) {

    var image = new Image();

    image.src = canvas.toDataURL("image/png");

    return image;

  }

</script>
需要注意：
跨域的图片需要设置crossOrigin="Anonymous"属性，然后等图片加载完成后才能使用 toDataURL() 方法

　　否则会报错：

　　　　Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

　　图片转canvas画布的时候(convertImageToCanvas)

　　需要注意的是：

　　　　如果图片原尺寸是200px*200px, 通过样式改变图片的宽高，则 image.width 和 image.height 获取的是改变后的宽高

　　　　如果改变后的宽高小于原尺寸，那么将不能完整的把图片完整的绘制出来

　　　　因为drawImage(image, 0, 0)是根据图片原尺寸进行绘制的
示例：
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

    /*img {

      width: 100px;

    }*/

  </style>

</head>

<body>

<!--<img id="tulip" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2256920272,2188849592&fm=26&gp=0.jpg" alt="" crossOrigin="Anonymous">-->

<img id="tulip" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=158393800,2846304514&fm=26&gp=0.jpg" alt="" crossOrigin="Anonymous">

</body>

</html>

<script>

  // Converts image to canvas; returns new canvas element

  function convertImageToCanvas(image) {

    var canvas = document.createElement("canvas");

    canvas.width = image.width;

    canvas.height = image.height;

    canvas.getContext("2d").drawImage(image, 0, 0);

    return canvas;

  }

  // Converts canvas to an image

  function convertCanvasToImage(canvas) {

    var image = new Image();

    image.src = canvas.toDataURL("image/png");

    return image;

  }

  function drawImage(img) {

    var cs = convertImageToCanvas(img);

    var image = convertCanvasToImage(cs);

    document.body.appendChild(image);

  }

  window.onload = function () {

    var img = document.getElementById("tulip");

    img.onload = drawImage(img);

  }

</script>

参考链接：

原生JS 将canvas生成图片的更多相关文章

  1. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  2. 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  3. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  4. 原生js 基于canvas写一个简单的前端 截图工具

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  5. 原生JS+Canvas实现五子棋游戏

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代 ...

  6. 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458  很多资料 ,前 ...

  7. 61.H5---利用canvas+原生js进行鼠标跟随绘图

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

  8. 基于canvas与原生JS的H5动画引擎

    前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...

  9. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

随机推荐

  1. wcf win7+iis7 异常消息为: 可能证书“CN=PmsWcfServer”没有能够进行密钥交换的私钥

    原因是证书没有用户权限,解决方法: 1.开始-运行-mmc 2.添加[证书]管理单元 3.选择[证书(本地计算机)]-[个人]-[证书],右击PmsWcfServer证书-[所有任务]-[管理密钥] ...

  2. WinForm通过操作注册表实现限制软件使用次数的方法

    1.创建注册表文件: 打开记事本,输入一些内容: ? 1 2 3 REGEDIT4 [HKEY_CURRENT_USER/Software/MyRegDataApp] "UseTime&qu ...

  3. 番外篇 之 Win32Api

    C# 调用系统API. 从自己的软件,来操作别人写好的软件. SendMessage 句柄  标识当前进程/控件的一个标识; 本课程所用到的常量信息: private const uint LB_FI ...

  4. 如何在HTML 5中拖动光标图标？

    window.app = { dragging: false, config: { canDrag: false, cursorOffsetX: null, cursorOffsetY: null } ...

  5. Action Bar

    1.显示隐藏Action Bar 1.配置上 在application 上的 android:theme="@style/AppTheme"全局配置ActionBar在某个acti ...

  6. SQLite的Integer类型

    SQLite 中的 INTEGER:带符号的整型,具体取决有存入数字的范围大小,根据大小可以使用1,2,3,4,6,8字节来存储. 在SQLite中,存储分类和数据类型也有一定的差别,如INTEGER ...

  7. Linux学习1-创建虚拟机

    VMware安装非常简单,使用默认安装就可以,VMware尽量使用低版本的软件,这样可以降低系统的消耗 1.新建一个虚拟机 2.直接选择默认的典型安装         3.选择安装来源:此处选择最后一 ...

  8. 关于pycharm 打不开某些文件夹和文件打不开的问题

    在使用pycharm的时候遇到了一个情况, 下载了一个文件,自己修改了文件夹名称后再打开文件夹里的py文件, 打不开了,pycharm没有反应, 百度了一下,没有类似的问题,觉得应该是个个例... 然 ...

  9. unicorn模拟执行学习

     前言 unicorn 是一个模拟执行软件,用于模拟执行各种平台的二进制文件,前几天在  twitter 上看到一篇文章,这里做个记录. 正文 记录系统调用 首先是一个简单的示例 e8ffffffff ...

  10. Linux 启动脚本及chkconfig命令之自启动服务

    有时我们会碰到这样的情况,系统启动的时候报一大堆无法连接mysql的错误,问题在mysql数据库还没有启动的时候已经启动了一些需要连接mysql数据库的服务.这样我们就得修改启动顺序,把需要连接mys ...