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代码小结
Aug 01 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 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树的代码,可以嵌套任意层
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
jquery indexOf使用方法
2013/08/19 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
pycharm远程调试openstack代码
2017/11/21 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python实现直播推流效果
2019/11/26 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
《我们的民族小学》教学反思
2016/02/19 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
VUE递归树形实现多级列表
2022/07/15 Vue.js
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS