js实现canvas图片与img图片的相互转换的示例

2024-09-28 21:24:30

最近在一个项目中，遇到了一个问题，需要把生成的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+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS写字板</title> <script src="http://libs.baidu.com/jquery/2.0.0
Js利用Canvas实现图片压缩功能

最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement
JS和Canvas实现图片的预览压缩和上传功能

先来一张效果图,压压惊第一步:用户选择需要上传的图片 <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax
js+h5 canvas实现图片验证码

本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随机生成颜色字符串及障碍物点击验证码可变更验证码图案二.使用步骤 1.html+css 代码如下(示例): <div class="login_code_box"> <div class="login_code"> <input
JS利用Canvas实现文字水印和图片水印合成

目录介绍文字水印图片水印介绍给图片添加水印可以帮助网站或作者保护自己的版权,或防止内容被别人利用.给图片添加水印分为添加文字水印和添加图片水印,水印一般都做成半透明的,这样不至于影响原图内容的浏览.Canvas 图片水印合成与 Canvas 实现图片压缩原理基本相同: CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight) 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像. HTMLCa
js canvas实现放大镜查看图片功能

本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: black;"> <c
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】

本文实例讲述了JS实现显示带倒影的图片横排居中放大展示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解

将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方. 将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js.css代码中),还可以防止因为一些相对路径等问题导致图片404错误. 引言假设一个应用场景:由于某些特殊原因从服务端请求到图片路径,要求通过该路径获取对应图片的 base64 dataURL
微信小程序canvas.drawImage完全显示图片问题的解决

问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载目的通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的解决方案准备工作 Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '',
vue.js根据图片url进行图片下载

最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题: 这是后台返回来的json数据(防止泄露重要信息IP地址打码了): 我在html里的引用是这样的: <a @click="downCom" > 下载执照 <i class="icon-down"></i> </a>

js实现canvas图片与img图片的相互转换的示例

相关推荐

随机推荐