js实现canvas图片与img图片的相互转换的示例
2017-08-31 15:40
686 查看
最近在一个项目中,遇到了一个问题,需要把生成的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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- js+html5绘制图片到canvas的方法
- JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
- js实现canvas保存图片为png格式并下载到本地的方法
- 使用JavaScript+canvas实现图片裁剪
- Js利用Canvas实现图片压缩功能
- JavaScript+html5 canvas实现图片破碎重组动画特效
- javascript结合canvas实现图片旋转效果
- js HTML5 canvas绘制图片的方法
- Canvas + JavaScript 制作图片粒子效果
- js canvas实现放大镜查看图片功能
- JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
相关文章推荐
- JS对象与json字符串相互转换实现方法示例
- JS实现数字格式千分位相互转换方法
- 原生js通过canvas和cssRules实现图片分割与重组
- js小方法+Canvas 利用js 实现浏览器保存图片到本地
- Java实现的时间戳与date对象相互转换功能示例
- JS 实现图片直接下载示例代码
- JS+HTML5 Canvas实现简单的写字板功能示例
- JS和Canvas实现图片的预览压缩和上传功能
- JS实现的图片预览插件与用法示例【不上传图片】
- 使用js操作css实现js改变背景图片示例
- 图片和Canvas的相互转换
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
- C#实现的图片、string相互转换类分享
- JS实现HTML实体与字符的相互转换(一)
- android图片类型之间相互转换实现代码
- java实现Img与PDF相互转换
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- BCB实现BMP图片的RGB分解,BMP与JPG格式的相互转换
- js实现字符串和数组之间相互转换操作
- jquery imgareaselect 使用利用js与程序结合实现图片剪切