核心代码：
<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. Linux 命令 "cp" 代码实现简介

    本blog主要是模仿Linux的cp命令的功能,未实现参数,只是基础功能部分. 本文的主要目的在于练习 文件流 和 目录流 中的函数的使用. 主要功能包括两种: 源文件属性为文件,拷贝到其它文件(内容 ...

  2. ELK 方案

    转自:https://blog.csdn.net/enweitech/article/details/81744250 今天临时收到一个企业客户的项目需求,需要对所有WIndows业务服务器的日志进行 ...

  3. 解决Tomcat出现内存溢出的问题

    Tomcat服务器出现java.lang.OutOfMemoryError:Java heap space异常 1.可能是程序错误,比如:程序陷入死循环 2.堆内存太小 一般情况下,java创建的对象 ...

  4. Jsp&Servlet入门级项目全程实录第6讲

    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.建立数据表及数据(略) 2.创建student model package com.java1234.model; ...

  5. MyEclipse中快速跳转到指定行号位置

    有时候我们希望能从当前编辑位置跳到指定行号的位置,可以使用Ctrl + l 快捷键. 其中 l 代表line.

  6. Xcode DEBUG宏定义，debug和release模式的选择

    设置DEBUG, 使用宏定义: #if DEBUG NSLog(@"debug model"); #else //执行release模式的代码 #endif

  7. 一：Web

    一:Web介绍 1.Web:网页,网络 2.Web应用:运行在网络上的应用程序 3.网络应用程序分类:C/S B/S C/S 客服端(client)/服务器(server) 典型应用:QQ,YY B/ ...

  8. 十七、curator recipes之DistributedPriorityQueue

    简介 官方文档:http://curator.apache.org/curator-recipes/distributed-priority-queue.html javaDoc:http://cur ...

  9. 为什么java需要序列化对象

    序列化是一种用来处理对象流的机制 所谓对象流:就是将对象的内容进行流化,可以对流化后的对象进行读写操作,也可将流化后的对象传输与网络之间 序列化是为了解决在对象流进行读写操作时所引发的问题 序列化的实 ...

  10. 浅谈Cookie、Session与Cache的区别

    以前实现数据的缓存有多种方法,如客户端的Cookie,服务器端的Session.Application. 一.Cookie Cookie是保存客户端的一组数据,主要用来保存用户的个人信息,主要存放浏览 ...