原生JS 将canvas生成图片
核心代码：
<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>
参考链接：
[link](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
[link](https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror)
[link](https://www.jianshu.com/p/6fe06667b748)
原生JS 将canvas生成图片的更多相关文章
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...
- 原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
- 原生js 基于canvas写一个简单的前端 截图工具
先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 原生JS+Canvas实现五子棋游戏
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代 ...
- 转 原生js canvas实现苹果电脑mac OS窗口最小化效果
http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458 很多资料 ,前 ...
- 61.H5---利用canvas+原生js进行鼠标跟随绘图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 基于canvas与原生JS的H5动画引擎
前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
随机推荐
- ActiveMQ专题1: 入门实例
序 好久没有写博客了,最近真的是可以说是忙成狗了.项目的事和自己的终身大事忙得焦头烂额,好在是一切都是越来越好了...... 趁着项目今天唯一的一点喘息时间,加上项目开始接触到的mq,开始写一篇amq ...
- UIKit 框架之UITextView
// // ViewController.m // UItextView // // Created by City--Online on 15/5/22. // Copyright (c) 2015 ...
- Python调用nmap扫描网段主机信息生成xml
#!/usr/bin/env python # -*- coding: utf_8 -*- # Date: 2015年10月23日 # Author:蔚蓝行 # 博客 http://www.cnblo ...
- Task.Factory.StartNew和Task.Run
在系统中单开线程进行操作,经常用到Task,发现Task主要有以下两种方法 Task.Factory.StartNew(() => { }); Task.Run(() => { }); 初 ...
- rabbitmq不同模式的交换机使用
交换机的功能主要是接收消息并且转发到绑定的队列,交换机不存储消息,在启用ack模式后,交换机找不到队列会返回错误.交换机有四种类型:Direct, topic, Headers and Fanout( ...
- asp.net MVC中form提交和控制器接受form提交过来的数据
1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的Request请求取值[HttpPost]public ActionResult AddNews(){ str ...
- WCF中DataContract和MessageContract的区别
一.代码案例 首选建立2个WCF Service,它们分别使用不同的Contract,同时创建一个Console控制台项目,作为Client: 其中,WcfServiceWithDataContrac ...
- Spring Boot 表单验证、AOP统一处理请求日志、单元测试
一.使用@Valid表单验证 于实体类中添加@Min等注解 @Entity public class Girl { @Id @GeneratedValue private Integer id; pr ...
- mysql 导入时报错：Got a packet bigger than‘max_allowed_packet’bytes
原因是max_allowed_packet 值设置过小. 网上粘贴一段定义: max_allowed_packet:指代mysql服务器端和客户端在一次传送数据包的过程当中数据包的大小这个是定义mys ...
- Global Average Pooling Layers for Object Localization
For image classification tasks, a common choice for convolutional neural network (CNN) architecture ...