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 相关文章推荐
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
完美解决vue 中多个echarts图表自适应的问题
Jul 19 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实现var_export的详细介绍
2013/06/20 PHP
php实现的通用图片处理类
2015/03/24 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
js一组验证函数
2008/12/20 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python对切片命名的实现方法
2018/10/16 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
python机器学习库xgboost的使用
2020/01/20 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
python3实现简单飞机大战
2020/11/29 Python
绘画设计学生的个人自我评价
2013/09/20 职场文书
秘书英文求职信范文
2014/01/31 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
经销商订货会主持词
2014/03/27 职场文书
活动总结范文
2014/08/30 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python