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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
canvas实现探照灯效果
Feb 07 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
vue数据响应式原理知识点总结
Feb 16 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页面中文乱码分析
2013/10/29 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
学生宿舍管理制度
2014/01/30 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
廉洁使者实施方案
2014/03/29 职场文书
交通事故起诉书
2015/05/19 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
张丽莉观后感
2015/06/16 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
vue基于Teleport实现Modal组件
2021/05/31 Vue.js