canvas和image互相转换
转载：http://www.cnblogs.com/sapho/p/6143819.html
1. 把img转换为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;
}
复制代码2. 把canvas转换为img复制代码
// 从canvas提取图片image function convertCanvasToImage(canvas){//新Image对象,可以理解为DOM;var image = new Image();//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持//指定格式PNGimage.src = canvas.toDataURL("image/png");return image;
}
复制代码示例代码:复制代码
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas与Image互相转换示例title>
head>
<body><img src="./list-icon-5.png" alt="" id="photo" width="17" height="24"><div id="canvasDiv" style="width: 300px; height: 30px;">div><div id="convertedImg">div><script src="./jquery-1.11.3.min.js">script><script>$(function(){// 把image转换为canvas对象var photo = document.getElementById('photo');//这个必须用原生var cDiv = convertImageToCanvas(photo);$("#canvasDiv").append(cDiv);// image-->canvasfunction 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转换为image的var myCanvas = document.getElementsByTagName("canvas")[0];var img = convertCanvasToImage(myCanvas);$("#convertedImg").append(img);// canvas-->imagefunction convertCanvasToImage(canvas){//新Image对象,可以理解为DOM;var image = new Image();//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持//指定格式PNGimage.src = canvas.toDataURL("image/png");return image;}});script>
body>
html>
复制代码效果如下：那么实现微信长按二维码识别的功能就很简单了，直接上代码吧~复制代码
<html lang="en">
<head><meta charset="UTF-8"><title>jquery实现微信长按识别二维码功能title><script src="./jquery-1.11.3.min.js">script><script type="text/javascript" src="jquery.qrcode.min.js">script>
head>
<body><div id="qrDiv" style="display: none;">div><div id="imgDiv">div><script>$(function(){//利用插件生成二维码,生成的二维码在canvas中$('#qrDiv').qrcode({width: 120,height:120,text: "https://www.baidu.com/"});//从canvas中提取图片imagefunction convertCanvasToImage(canvas) {//新Image对象，可以理解为DOMvar image = new Image();// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持// 指定格式PNGimage.src = canvas.toDataURL("image/png");return image;}//获取网页中的canvas对象var mycanvas1=document.getElementsByTagName('canvas')[0];//将转换后的img标签插入到html中var img = convertCanvasToImage(mycanvas1);$('#imgDiv').append(img);//imgDiv表示你要插入的容器id})script>
body>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！