最近在一个项目中，遇到了一个问题，需要把生成的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. 安装inotify-tools监控工具

    安装inotify-tools监控工具 yum install -y inotify-tools 2:查看inotify-tools包的工具程序 [root@dns3 ~]# rpm -ql inot ...

  2. Data Governance

    https://erwin.com/blog/data-preparation-mapping/

  3. js04-DOM对象一

    一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现 ...

  4. java异常处理规范

    异常处理的优势[存在意义]:异常检测者有检测出异常的能力,但不知道在出现该异常的情况下应该怎么处理.故库方法一般会抛出异常给调用者来处理.所以总结而言,异常处理的优势就是,将处理错误(调用者处理)从检 ...

  5. nginx之安装、多虚拟主机、反向代理和负载均衡

    一.web服务器与web框架 1.web服务器简介 Web 网络服务是一种被动访问的服务程序,即只有接收到互联网中其他主机发出的请求后才会响应,最终用于提供服务程序的Web服务器会通过 HTTP(超文 ...

  6. Ueditor注意的地方

    复制粘贴内容到编辑器上时,一些标签的属性会被过滤,在config.js里添加白名单配置项,例如: whitList: { a: ['target', 'href', 'title', 'class', ...

  7. java 从指定行读文件，执行系统命令

    import java.util.*; import java.io.*; public class Example { public static void main(String[] args){ ...

  8. Git冲突：You have not concluded your merge

    You have not concluded your merge. (MERGE_HEAD exists) Git本地有修改如何强制更新 我尝试过用git pull -f,总是提示 You have ...

  9. centos7虚拟机下python3安装matplotlib遇到的一些问题

    1.安装位置 centos7虚拟机+python3.6 2.问题 2.1如果是使用的python2版本可以使用如下方式, #yum search matplotlib 返回如下: 已加载插件:fast ...

  10. webpack学习记录 - 学习webpack-dev-server（三）

    怎么用最简单的方式搭建一个服务器? 首先安装插件 npm i --save-dev webpack-dev-server 然后修改 packet.json 文件 "scripts" ...