最近在一个项目中，遇到了一个问题，需要把生成的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. AI佳作解读系列(一)——深度学习模型训练痛点及解决方法

    1 模型训练基本步骤 进入了AI领域,学习了手写字识别等几个demo后,就会发现深度学习模型训练是十分关键和有挑战性的.选定了网络结构后,深度学习训练过程基本大同小异,一般分为如下几个步骤 定义算法公 ...

  2. Android——分割线中夹文字

    内容不多,只是感觉平时很容易遇上,那就做个笔记吧! 其实很简单,如下: <RelativeLayout android:layout_width="match_parent" ...

  3. angular4 数据绑定

    HTML属性绑定 1.基本Html属性绑定 <td [attr.colspan]="tableColspan">something</td> 2.css类绑 ...

  4. Linux 学习 (八) Shell

    Linux达人养成计划 I 学习笔记 Shell 是什么: Shell 是一个命令解释器 Shell 还是一个功能相当强大的编程语言,易编写,易调试,灵活性较强 Shell 的分类: Bourne S ...

  5. HBase数据库配置中各配置项的释义及默认值

    2018-11-26 16:09 2018-12-20 15:44 摘自HBASE官方网站  http://hbase.apache.org/book.html#_introduction  第7.2 ...

  6. Redis DeskTop Manager 使用教程

    redis desktop manager windows 是一款能够跨平台使用的开源性redis可视化工具. redis desktop manager主要针对redis开发设计,拥有直观强大的可视 ...

  7. CF757E Bash Plays with Functions

    题解 q<=1e6,询问非常多.而n,r也很大,必须要预处理所有的答案,询问的时候,能比较快速地查询. 离线也是没有什么意义的,因为必须递推. 先翻译$f_0(n)$ $f_0(n)=\sum_ ...

  8. html - 表单form

    一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...

  9. MyBatis集成到Spring时配置MapperScannerConfigurer出错

    问题描述 在web项目中同时集成了spring mvc和mybatis. 将jdbc配置参数独立在外部配置文件中,然后通过<context:property-placeholder>引入. ...

  10. [物理学与PDEs]第2章第2节 粘性流体力学方程组 2.6 一维粘性热传导流体动力学方程组

    一维粘性热传导流体动力学方程组: $$\beex \bea \cfrac{\p\rho}{\p t}+\cfrac{\p }{\p x}(\rho u)&=0,\\ \cfrac{\p u}{ ...