Canvas 输出位图

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量311 收藏
点赞数
文章标签： java springmvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linkedin_38250634/article/details/69942538
版权
一 介绍
toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。
dataURL是将数据按base64进行编码，它是一种保存二进制的方式。
下面通过这种方法输出位图。
 
二 代码下载
Html代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  6.     <title> 位图输出 </title>  
  7. </head>  
  8. <body>  
  9. <h2> 位图输出 </h2>  
  10. <canvas id="mc" width="360" height="280"  
  11.     style="border:1px solid black"></canvas>  
  12. <img id="result" src="" alt="图片输出"/>  
  13. <script type="text/javascript">  
  14.     // 获取canvas元素对应的DOM对象  
  15.     var canvas = document.getElementById('mc');  
  16.     // 获取在canvas上绘图的CanvasRenderingContext2D对象  
  17.     var ctx = canvas.getContext('2d');  
  18.     ctx.save();  
  19.     ctx.translate(30 , 20);  
  20.     var image = new Image();  
  21.     image.src = "wjc.gif";  
  22.     image.onload = function()  
  23.     { 下载
  24.         // 创建位图填充  
  25.         imgPattern = ctx.createPattern(image, "repeat");  
  26.         // 设置使用位图填充作为填充颜色  
  27.         ctx.fillStyle = imgPattern;  
  28.         // 填充一个矩形  
  29.         ctx.fillRect(0 , 0 , 160 , 80);  
  30.         // 恢复坐标系统  
  31.         ctx.restore();  
  32.         // 平移坐标系统  
  33.         ctx.translate(280 , 160)  
  34.         ctx.beginPath();  
  35.         // 添加圆弧  
  36.         ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);  
  37.         ctx.closePath();  
  38.         ctx.lineWidth = 12;  
  39.         // 设置使用位图填充作为边框颜色  
  40.         ctx.strokeStyle = imgPattern;  
  41.         ctx.stroke();  
  42.         // 使用img元素来显示Canvas的输出结果  
  43.         document.getElementById("result").src = canvas.toDataURL("image/png");  
  44.     }  
  45. </script>  
  46. </body>  
  47. </html>  
 
三 运行结果

linkedin_38250634
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java awt画布_Java AWT画布
cumtb2009的博客
08-02 1584
java awt画布Canvas is a GUI component that creates a rectangular box on the screen. It can be used to draw shapes or print text, it acts as a canvas. It can also be used to take user inputs. It is calle...
html绘制位图,Canvas 绘制位图图像 ImageBitmap
weixin_33154775的博客
07-14 1386
在 Canvas 图像来源 CanvasImageSource 章节中我们有提到可以使用 ImageBitmap 作为 drawImage() 的图像来源ImageBitmapImageBitmap 是什么呢？ImageBitmap 是一个高性能的位图，可以低延迟地绘制，它可以从前几章节中学到的所有源以及其它几种源中生成什么意思呢？也就是说，ImageBitmap 可以从一张图片，比如 png,j...
Canvas绘图优化之使用位图--基于createjs库
weixin_30847271的博客
08-09 149
在地图上实时绘制大量（万级别）图形，实时绘制的原因是因为各个图形形状不同，图形要按照后端传送的参数来绘制。 用canvas绘制图形比较方便，javascript的api接口也比较简单。现在也有很多的js canvas库，比如这个：createjs中的easeljs，对canvas进行了轻量的封装，支持链式操作，支持给图形添加事件，虽然它是专门用来做游戏开发的，但拿它来实时绘制图形，在图形上添加事...
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 2646
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
Canvas画布 位图
weixin_30532369的博客
05-21 258
不要在style中给canvas设置宽高 会有位移差 fillRect() 绘制一个填充的方块 默认颜色是黑色 strokeRect() 绘制带边框的方块 绘制线条 moveTo() 绘制线段的起点 lineTo() 绘制线段的领点 每个线条只能有一个moveTo可以有多个lineTo Stroke()绘制线段 beginPath() ClosePath()...
OpenGL Canvas for Delphi
02-10
填充多边形、矩形、三角形、曲线封闭区域，并可输出文字、位图。 5. 每一个绘图方法都返回画布自身指针，支持链式操作。 6. 支持坐标变换后，Windows自身画布坐标到实际坐标的反计算，可以 方便实现鼠标拾取等...
Delphi Canvas应用
04-26
对于文本绘制，Canvas.TextOut和Canvas.DrawString等方法可以实现自定义位置和样式的文本输出。 在描述中提到的“发票单据打开”场景，可能是利用Canvas来显示和打印发票。开发者可能需要利用Canvas来绘制发票的...
Canvas绘图程序Java
03-17
Canvas类被用作图形输出的目标，允许程序员直接在屏幕上绘制图形，实现自定义的图形界面或者游戏。这个"Canvas绘图程序Java"源码集合可能包含了一系列用于演示和学习如何使用Canvas进行图形绘制的示例代码。 首先，...
DELPHI打印文本和位图例程
05-29
在Delphi中，`TBitmap`类用于创建和操作位图，而`TPrinter`的`Canvas`同样可以用来绘制位图。以下是一个基本步骤： 1. 创建一个`TBitmap`对象：`var Bitmap: TBitmap;` 2. 加载或创建位图：`Bitmap.LoadFromFile('...
Delphi Canvas方法在图片上写入文字.rar
04-09
在Delphi编程环境中，Canvas对象是用于图形绘制的核心组件，特别是在处理位图、画布和其他图形表面时。这个“Delphi Canvas方法在图片上写入文字.rar”压缩包可能包含了如何利用Canvas对象在图片上添加文本的示例...
HTML5画布Canvas图片抽取、像素信息获取、命中检测
热门推荐
尐轩web前端网络日志
01-14 3万+
今天主要介绍canvas中比较强大的功能 比如将画布内容抽取为图片 获取、修改画布的像素信息 以及画布的命中检测 首先我仍然需要创建画布<canvas id="myCanvas" width=500 height=500></canvas>图片抽取首先要明确的一点是 toDataURL()是canvas对象自身的方法而不是环境对象的 这个方法会将canvas的内容抽取为一张图片（base
canvas——绘制图片
sleepwalker_1992的专栏
06-05 1万+
绘制图片（drawImage） （重点） 1、基本绘制图片的方式 context.drawImage(img,x,y); 参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。 2、 在画布上绘制图像，并规定图像的宽度和高度 context.drawImage(img,x,y,width,height); 参数说明：width 绘制图片的...
HTML5 canvas获取图片
懒虫一个V
05-06 1万+
//将图像输出为base64压缩的字符串  默认为image/png var data = canvas.toDataURL();    // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..." //var data = canvas.toDataURL('image/jpeg');  //re
WPF技巧-Canvas转为位图
weixin_30562507的博客
09-14 161
在WPF中我们可以将Canvas当成一种画布，将Canvas中的控件当成元素，讲其转成位图文件： 如下效果 图1.1 你可以设置Canvas的宽度、高度和颜色类型，生成任何你想要的图片。实时呈现你...
图形绘制之——Canvas详解（四）-Bitmap（位图）及Matrix矩阵
womengmengyan的博客
09-17 1万+
前面我们提到过canvas相当于画家，而bitmap相当于画布，前面博客的例子都是直接利用canvas绘制，这里我们来学习一下，利用bitmap先将图形绘制好，然后一起放到最终的canvas中^^。 位图概念：Bitmap可以获得图像文件的信息，进行图像剪切、旋转、缩放等操作，并可以指定格式保存图像文件。 先来看一下bitmap的实例获得，这里是其中一种方式，通过已有的图片来获得它的位图，以后我
canvas绘制图片详解
ITzhongzi的博客
03-10 1541
创建对象的方式 script>     var canvas = document.getElementById("canvas");     var ctx = canvas.getContext("2d");     //1、     var img1=document.createElement("img");     img1.src="../图片/beauty/5
通过canvas获取图片base64位编码
zhang_cherry的博客
01-04 4358
前言 canvas是HTML5提供的一种2D绘图工具，官方库中提供了各种可以绘制直线、矩形、多边形等形状的API。在前端和后端的交互中，后端往往需要在前端获取图片的base64位编码信息，而canvas提供了getImageData和toDataURL等接口，使前端能够方便地获取图片信息。
canvas 上显示位图
04-28
Canvas是HTML5提供的一个绘图API，可以用于在网页上绘制图形、动画和位图等。要在Canvas上显示位图，可以通过以下步骤进行操作： 1. 创建一个Canvas元素： ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` 2. 获取Canvas的上下文： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 3. 创建一个Image对象并加载位图： ```javascript var image = new Image(); image.src = "path/to/image.png"; ``` 4. 在图像加载完成后，使用drawImage方法将位图绘制到Canvas上： ```javascript image.onload = function() { ctx.drawImage(image, x, y); }; ``` 其中，x和y是位图在Canvas上的坐标位置。 以上是在Canvas上显示位图的基本步骤。你还有其他关于Canvas或位图的问题吗？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值