最近在一个项目中，遇到了一个问题，需要把生成的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. U盘安装CentOS系统、raid5制作以及nohup的使用

    最近折腾服务器,用U盘安装了系统,总结了一些避坑措施: 下载UltraISO工具,用来刻盘 从centos官网下载ISO镜像,然后刻盘 关键是在你进入系统安装界面后,如下: 选中第一项,按tab键(看 ...

  2. 拷贝文件到服务器 提示FTP文件夹错误

    FTP文件夹错误将文件复制到FTP服务器时发生错误.请检查是否有权限将文件放到该服务器上.详细信息:200 Type set to I.227Entering Passive Mode (122,11 ...

  3. jatoolsprinter web打印控件直接打印不弹出

    1.功能 主要是实现页面点击按钮,不弹窗,直接打印. 可以指定某个打印机打印 可以使用默认打印机打印 2.版本 主要有:免费版跟付费版 免费版官网:http://printfree.jatools.c ...

  4. 【BZOJ5499】[2019省队联测]春节十二响（贪心）

    [BZOJ5499][2019省队联测]春节十二响(贪心) 题面 BZOJ 洛谷 题解 如果是一条折链,显然维护两侧的值,每次两个堆分别弹出一个\(max\)然后合并一下,最后再放回去就可以了. 那么 ...

  5. CF2B The least round way(dp+记录路径)

    B. The least round way time limit per test 2 seconds memory limit per test 64 megabytes input standa ...

  6. Zabbix通过Orabbix监控Oracle数据库

    一.背景 公司业务使用的是一直Oracle数据库,因为多次出现表空间满的时候不能及时发现,每次都是业务组的人员通知处理,这样下来DBA这边就比较被动,所以老大要求监控表空间剩余大小并且当剩余过小时能够 ...

  7. Web of science数据下载以数据处理

    目标网站分析 我们要获取的就是这几个数值 程序实现 # -*- coding: utf-8 -*- """ @Datetime: 2019/2/28 @Author: Z ...

  8. Flask进阶

    Threading.local 作用:为每个线程创建一个独立的空间,使得线程对自己的空间中的数据进行操作(数据隔离). 应用: flask上下文管理中的local中比这更高级,为协程. DBUtils ...

  9. Hadoop基础-Hadoop的集群管理之服役和退役

    Hadoop基础-Hadoop的集群管理之服役和退役 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,如果是上千万规模的集群,难免一个一个月会有那么几台服务器出点故 ...

  10. NOI-OJ 1.13 ID:23 区间内的真素数

    整体思路 这里需要大量使用素数,必须能够想到只求出M到N之间的素数是不够的,因为M到N之间数字的反序有可能是大于M或小于N的数字,例如M=2,N=20,那么19的反序91大于20,所以使用埃拉拖色尼算 ...