核心代码：
<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. [Codeforces 925C]Big Secret

    Description 题库链接 给出 \(n\) 个数,让你生成这 \(n\) 个数的一个排列 \(A\) .定义 \(B_i = \bigoplus\limits_{j=1}^i A_j\) , ...

  2. [转]SQL SERVER数据库删除LOG文件和清空日志的方案

    本文转自:https://www.cnblogs.com/ShaYeBlog/archive/2012/09/04/2670505.html 数据库在使用过程中会使日志文件不断增加,使得数据库的性能下 ...

  3. DEV控件ASPxTextBox设置ClientEnabled="false"之后出现的问题

    DEV控件ASPxTextBox设置ClientEnabled="false"之后,js中设置文本框的值后,按钮后台点击事件中获取文本框的值为空.

  4. macOS 中文件属性有at符号

    在mac os 下 HFS+的文件系统里,有时候有些文件会附加上mac的专有属性,@属性就表示文件或文件夹是来自互联网下载 xattr -l 文件名:查看attrxattr -d 属性名:删除attr

  5. MySQL 中 You can't specify target table '表名' for update in FROM clause错误解决办法

    在MySQL中,写SQL语句的时候 ,可能会遇到You can't specify target table '表名' for update in FROM clause这样的错误,它的意思是说,不能 ...

  6. IDEA使用总结1-Github下载代码和上传代码到Git

    1. 首先你需要在IDEA中创建一个项目,创建完项目后使能版本管理插件 选择git后创建本地git仓库成功,提示如下 2.第二步 commit代码到 commit时会提示是否需要进行检查什么的 3.第 ...

  7. python 字符串居中

    下面的代码可以让字符串居中,左对齐和右对齐,字符串长度设置为50,居中后左右补充空格,右对齐会在左侧补充空格 string1 = "Now I am here." print( s ...

  8. python学习之老男孩python全栈第九期_数据库day002知识点总结 —— MySQL数据库day2（全部）

    一. 复习1. MySQL: - 服务端 - 客户端2. 通信交流 - 授权 - SQL语句 - 数据库 创建数据库: create database db1 default charset utf8 ...

  9. 在GDI+中如何实现以左下角为原点的笛卡尔坐标系

    今天写了一个求点集合的凸包的一个算法,虽然结果求解出来了,但是想将过程用GDI+绘制出来,就需要将点绘制出来,然而c#GDI+中绘图的坐标与我们常用数学中笛卡尔坐标系是不一样的,所以就要转换GDI+中 ...

  10. JavaWeb学习总结（七）：通过Servlet生成验证码及其应用 （BufferedImage类）

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下: