热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js实现canvas图片与img图片的相互转换的示例

最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等。查找了一些资料归纳总结了一些知识。

最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等。查找了一些资料归纳总结了一些知识。

默认在jq库里进行,引入jquery.qrcode.min.js库,将canvas图片转化为img图片,代码如下,


  

同理也可以将图片转换为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; 
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
  • django项目中使用手机号登录
    本文使用聚合数据的短信接口,需要先获取到申请接口的appkey和模板id项目目录下创建ubtils文件夹,定义返回随机验证码和调取短信接口的函数function.py文件se ... [详细]
  • 匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上)
    匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上) ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 实现一个具有动画效果的手风琴组件,包括代码示例和实现原理。 ... [详细]
  • J2EE平台集成了多种服务、API和协议,旨在支持基于Web的多层应用开发。本文将详细介绍J2EE平台中的13项关键技术规范,涵盖从数据库连接到事务处理等多个方面。 ... [详细]
  • MVC框架下使用DataGrid实现时间筛选与枚举填充
    本文介绍如何在ASP.NET MVC项目中利用DataGrid组件增强搜索功能,具体包括使用jQuery UI的DatePicker插件添加时间筛选条件,并通过枚举数据填充下拉列表。 ... [详细]
  • Spring Boot 初学者指南(第一部分)
    本文介绍了Spring Boot框架的基础知识,包括其设计理念、主要优势以及如何简化传统的J2EE开发流程。 ... [详细]
  • ODB 2.1.0 版本现已推出,此更新引入了多项新功能,如通过访问器、修饰符、函数及表达式访问数据成员,支持虚拟数据成员,并允许在数据成员上直接定义数据库索引等。 ... [详细]
  • jquery java 文件上传_jQuery文件上传
    插件描述:这是一个文件上传的展示,看很多插件,并不满意就自己写了一个,可能兼容性不是很好,没有准确进行测试过& ... [详细]
  • 微服务自动化.dockercompose
    目录一、docker-compose二、docker-compose安装与配置1、修改docker.service2、下载文件3、将刚才下载的docker-compose文 ... [详细]
  • 本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例,详细解释了从安装扩展到编写具体代码的全过程。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制,包括基本的toggle方法及更复杂的显示隐藏逻辑。 ... [详细]
author-avatar
mobiledu2502868653
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有