js实现canvas图片与img图片的相互转换的示例


Posted in Javascript onAugust 31, 2017

最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等。查找了一些资料归纳总结了一些知识。

默认在jq库里进行,引入jquery.qrcode.min.js库,将canvas图片转化为img图片,代码如下,

<body>
  <div id="cans"></div>
  <div id="img"></div>
</body>
<script>
//生成canvas形式的二维码
$("#cans").qrcode({
  width:150,
  height:150,
  text:'http://www.cnblogs.com/dxzg/p/6424855.html'//需要生成的内容
  });
  
//从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
  //新Image对象,可以理解为DOM 
  var image = new Image(); 
  // canvas.toDataURL 返回的是一串Base64编码的URL
  // 指定格式 PNG 
  image.src = canvas.toDataURL("image/png"); 
  return image; 
} 

//获取网页中的canvas对象 
var mycans=$('canvas')[0];  
//调用convertCanvasToImage函数将canvas转化为img形式  
var img=convertCanvasToImage(mycans); 
//将img插入容器 
$('#img').append(img); 
</script>

同理也可以将图片转换为canvas,转换函数如下:

// 把image 转换为 canvas对象 
function convertImageToCanvas(image) { 
  // 创建canvas DOM元素,并设置其宽高和图片一样  
  var canvas = document.createElement("canvas"); 
  canvas.width = image.width; 
  canvas.height = image.height; 
  // 坐标(0,0) 表示从此处开始绘制,相当于偏移。 
  canvas.getContext("2d").drawImage(image, 0, 0);  
  return canvas; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
Angular如何引入第三方库的方法详解
Jul 13 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
vue实现全选和反选功能
Aug 31 #Javascript
浅谈Vue 初始化性能优化
Aug 31 #Javascript
Vue keep-alive实践总结(推荐)
Aug 31 #Javascript
深入理解vue-router之keep-alive
Aug 31 #Javascript
vue-router 导航钩子的具体使用方法
Aug 31 #Javascript
浅谈express 中间件机制及实现原理
Aug 31 #Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
php使用google地图应用实例
2014/12/31 PHP
php多重接口的实现方法
2015/06/20 PHP
javascript 面向对象继承
2009/11/26 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python中交换两个元素的实现方法
2018/06/29 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python 多线程中join()的作用
2020/10/29 Python
Python下载的11种姿势(小结)
2020/11/18 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
试用期自我评价范文
2015/03/10 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Python Numpy库的超详细教程
2022/04/06 Python