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设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
JS 创建对象的模式实例小结
Apr 28 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/05/10 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python中type的构造函数参数含义说明
2015/06/21 Python
python的keyword模块用法实例分析
2015/06/30 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python属性和内建属性实例解析
2020/01/14 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
《三峡》教学反思
2014/03/01 职场文书
公司接待方案
2014/03/08 职场文书
体育运动口号
2014/06/09 职场文书
未中标通知书
2015/04/17 职场文书
草房子读书笔记
2015/06/29 职场文书
新学期家长寄语2016
2015/12/03 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS