最近在一个项目中，遇到了一个问题，需要把生成的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. vue入门之编译项目

    好记性不如烂笔头,最近又开始学习vue了,编译的过程中遇到几个小坑,特此一记.     首先说一下vue项目如何编译,其实很简单,cd到项目文件夹,然后执行命令: npm run bulid 不过np ...

  2. 有关python2与python3中关于除的不同

    有关python2与python3中关于除的不同 python中2版本与3版本关于除的处理还是有一些差异的. 在python 2.7.15中除(/)是向下取整的,即去尾法. 123/10 # 结果 1 ...

  3. Java socket详解(转)

    一:socket通信基本原理. 首先socket 通信是基于TCP/IP 网络层上的一种传送方式,我们通常把TCP和UDP称为传输层. 如上图,在七个层级关系中,我们将的socket属于传输层,其中U ...

  4. redis一主二从加哨兵

    redis版本:redis-3.0.6.tar.gz master:192.168.3.180 slave:192.168.3.184 (机器原因,两从都在这上面) 一.redis安装 cd /roo ...

  5. AtomicInteger学习

    面试时被问到了,补下 import java.util.concurrent.atomic.AtomicInteger; /** * Created by tzq on 2018/7/15. */ p ...

  6. dijstra算法

    无向图.赋权有向图 的最短路径

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

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

  8. js身份证正则

    身份证正则 var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if (!reg.test(IDCard)) {return false;}

  9. Linux saltstack常用模块

    所有模块 salt '172.30.100.126' sys.list_modules #列出当前版本支持的模块 salt '*' sys.doc cp #显示指定模块的文档 archive模块 实现 ...

  10. Nginx禁止IP直接访问网站

    禁止别人直接通过IP访问网站,在nginx的server配置文件前面加上如下的配置,如果有通过IP直接访问的,直接拒绝连接(需要去掉别的server下的default_server). server ...