原生JS 将canvas生成图片

核心代码：

<script type="text/javascript">// Converts image to canvas; returns new canvas elementfunction 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 imagefunction 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 elementfunction 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 imagefunction 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)

转载于:https://www.cnblogs.com/WEB-PHP/p/10426164.html

原生JS 将canvas生成图片相关推荐

java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
原生JS结合canvas写的一套画板,能修改画笔粗细,能修改画笔颜色,能清空画板等一系列功能
1. 本片文章是使用的原生JS代码编写的画板,能实现画笔粗细的修改,以及画笔颜色的修改 2. 用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标 ...
前端学习（2879）歌谣学习篇原生js和canvas实现弹幕功能
我是歌谣放弃很难坚持一定很酷 2021继续加油目录结构文件地址源码地址后面可见源码文件 index.css body { margin: 0; } .container { width: ...
原生JS实现Canvas时钟
HTML中只有一个div包裹一个canvas元素,重点看JS部分. 重点: beginPath() 方法在一个画布中开始子路径的一个新的集合. 也就是说,运行到这个函数时,context中止当前的路 ...
原生js实现canvas粒子特效
要实现的效果当鼠标移入容器时,让鼠标作为中心点半径为80到圆内的粒子散开当粒子不在圆的范围后,粒子返回原来的位置主要代码创建初始位置 // NUM_PARTICLES是粒子总个数for ( i ...
原生js通过canvas和cssRules实现图片分割与重组
将一张照片分割成几段然后重新组合,按照常理来讲使用h5的canvas标签很容易就实现了,长话短说,直入正题: html : 首先创建一个img标签: <img id="img" ...

原生JS 将canvas生成图片

原生JS 将canvas生成图片相关推荐

最新文章

热门文章