最近在一个项目中，遇到了一个问题，需要把生成的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;

}

canvas图片与img图片的相互转换的更多相关文章

  1. canvas代替img渲染图片

    移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...

  2. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  3. canvas绘制圆图输出图片格式

    function drawCircleImage(url, callback) { const canvas = document.createElement('canvas'); const img ...

  4. canvas应用——将方形图片处理为圆形

    上段时间在项目中需要将方形图片处理为圆形图片,你可能会说直接用css设置border-radius: 50%就可以了,但是项目中还要将此图片的圆形图片作为一部分利用canvas将其绘制到一张背景图上面 ...

  5. openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题

    一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...

  6. js使用canvas在前端压缩图片

    HTML代码: <input id="file" type="file"> JS代码: var eleFile = document.querySe ...

  7. 微信小程序利用canvas生成海报分享图片

    一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...

  8. canvas性能-drawImage渲染图片

    canvas性能-绘制图片 目录 canvas性能-绘制图片 canvas绘制图片 drawImage putImageData createPattern 测试绘制耗时 drawImage Imag ...

  9. android 加载自定义图片并在图片上绘图

    来源:毕设 关键词:Bitmap Canvas //毕设中需要自定义室内地图,并且在地图上绘制轨迹 //此处是一个测试Demo,实现图片的加载和记录手指在屏幕上的运动轨迹 图片的载入 使用系统提供的内 ...

  10. 移动端 H5 拍照 从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

随机推荐

  1. すぬけ君の塗り絵 / Snuke's Coloring AtCoder - 2068 （思维，排序，贡献）

    Problem Statement We have a grid with H rows and W columns. At first, all cells were painted white. ...

  2. Kubernetes — Job与CronJob

    有一类作业显然不满足这样的条件,这就是“离线业务”,或者叫作 Batch Job(计算业务). 这 种业务在计算完成后就直接退出了,而此时如果你依然用 Deployment 来管理这种业务的话,就会 ...

  3. vagrant之常用操作

    基本操作: 查看版本: vagrant -v 初始化: vagrant init 启动虚拟机: vagrant up 关闭虚拟机: vagrant halt 重启虚拟机: vagrant reload ...

  4. dubbo在idea下的使用创建 服务者，消费者 注册中心

    1.基于windows 下  spring 下的dubbo  需要书写配置文件 (1).创建带有web工程的项目 创建一个服务者 package cn.edu.aynu.bean; import lo ...

  5. 整合Spring5+Struts2.5+Hibernate5+maven

    1. 使用Eclipse创建Maven项目 2. 配置pom.xml引入需要的依赖包 <dependencies> <dependency> <groupId>ju ...

  6. Python连接SQL Server数据库 - pymssql使用基础

    连接数据库 pymssql连接数据库的方式和使用sqlite的方式基本相同: 使用connect创建连接对象 connect.cursor创建游标对象,SQL语句的执行基本都在游标上进行 cursor ...

  7. Nginx ACCESS阶段 Satisfy 指令

    L:60 这里一定要记住 return 指令所对应的阶段 早与access 因此如果location 有return 的话 那么 deny可能都会失效

  8. .Net Core实践1

    实践目标 编写经典的hello world程序.使用.netcore框架,然后运行在linux上. .netcore目前已经是2.1版本了,可以简单的认为是一种跨平台的.net framework,除 ...

  9. Linux硬盘性能测试工具 - FIO

    1.安装:方法一:直接用指令yum -y install fio方法二:如果方法一不可行则,在官网http://freshmeat.net/projects/fio/下载fio的安装包.安装方法很简单 ...

  10. Linux 安装node.js和npm教程

    前言:最近想做一款移动端的网站,在网上找了下,想用vue.js来提供技术支持,看了下安装教程,发现都是用npm来安装的,没办法,只能去装个npm了,之前没有装过这个包管理工具,这也是第一次安装吧,记录 ...