核心代码：
<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. 【转】外国朋友出的js题目，你能对几道

    原文地址 http://perfectionkills.com/javascript-quiz/ 中文地址加解释:by Aaron:http://www.cnblogs.com/aaronjs/p/3 ...

  2. IOS第三方之SDWebImage

    项目中从服务器端下载图片这些几乎是必备的,使用时也很简单,只需引入SDWebImage文件 // // ViewController.m // sdWebImageDemo // // Created ...

  3. WinForm 多语言处理

    多语言处理工具我使用的是  SailingEase .NET Resources Tool ,好处是导出一个Excel,把具体翻译工作交给专业的人来做,翻译ok后再导入,缺点就是后续更改麻烦,添加一个 ...

  4. tap 和click 事件区别

    clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...

  5. [C#]简单离线注册码生成与验证

    本文使用RSA非对称加密和Base64简单地实现离线注册码的生成与验证功能. 主要思路就是提供者持有密钥,通过RSA加密客户机标识或时间标识,再通过Base64加密成不太难看的注册码,然后分发给客户机 ...

  6. maven（视频学习）

    一.maven的介绍 二.maven的环境搭建 三.maven的结构 四.maven常用的构建命令 五.maven自动创建目录骨架 六.maven中的坐标和仓库 七.在eclipse中安装maven插 ...

  7. new DialogInterface.OnClickListener()报错的解决办法

    在项目过程中 new DialogInterface.OnClickListener()总是报下面的错 Illegal qualified access from the type parameter ...

  8. linux rabbitmq 安装

    下载 在安装 erlang 时使用的是源码包21.0版本:接着下载 rabbitmq-server/3.7.7 的源码包,编译时报错,说 erlang 版本号不满足条件,erlang版本>=19 ...

  9. redis 概述、windows版本下载启动访问退出安装、中文乱码、RedisDesktopManager下载

    redis 概述 redis的key是string类型的:value有多种类型,但放入的不是特定类型数据,添加的都是string,只是redis把这些值组织成了各种数据结构.key和相应的值都是str ...

  10. 6_1 持久化模型与再次加载_探讨(1)_三种持久化模型加载方式以及import_meta_graph方式加载持久化模型会存在的变量管理命名混淆的问题

    笔者提交到gitHub上的问题描述地址是:https://github.com/tensorflow/tensorflow/issues/20140 三种持久化模型加载方式的一个小结论 加载持久化模型 ...