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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 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抽象工厂模式(Elgg)
2010/03/21 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
我的javascript 函数链之演变
2011/04/07 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python内存读写操作示例
2018/07/18 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python Tensor和Array对比分析
2020/01/08 Python
python重要函数eval多种用法解析
2020/01/14 Python
python实现滑雪游戏
2020/02/22 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
婚礼双方父亲致辞
2015/07/27 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
Python字典的基础操作
2021/11/01 Python