html5怎么修改图片大小,HTML5 javascript修改canvas的大小

最新推荐文章于 2022-12-01 17:33:46 发布
最新推荐文章于 2022-12-01 17:33:46 发布
阅读量1.8k 收藏 1
点赞数
文章标签： html5怎么修改图片大小

方法1： 设定固定的值，这种方式跟在html中设定canvas的值没有什么区别：

window.onload = function(){

canvas.height = 100;

canvas.width = 200;

}

changeCanvasSize = function(){

canvas.height = 100;

canvas.width = 200;

}

方法2：　修改带固定的尺寸，这种方式跟第一种很相似，需要传递参数，这也没什么；

changeCanvasSize = function(width, height){

canvas.height = height;

canvas.width = width;

}

方法3： 最想记载的一种方式，根据某个图片尺寸设定canvas的大小：

var image = document.getElementById("image");

canvas.width = image.width;

canvas.height = image.height;

方法4： 取的是javascript中加载的图片的大小，不能直接取image的大小是因为当执行完了image.src之后，这个图片加载是相对延迟的，也就是说这个时候的image的大小还是0*0。

var image = new Image();

window.onload = function(){

image.src = "some/location/name.jpg";

image.οnlοad= function(){

canvas.width = image.width;

canvas.height = image.height;

}

}

尤其是以上方法4，是自己的理解，不知对否。。。。

JavaScript修改Canvas图片

用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...

用JavaScript修改Canvas图片的分辨率(DPI)

应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72 这个DPI太低, 导致打印出来的图片会很模糊. 修改 ...

【javascript】html5中使用canvas编写头像上传截取功能

[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

使用JavaScript和Canvas打造真实的雨滴效果

使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...

初探Javascript之Canvas

什么是Canvas 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...

【教程】HTML5+JavaScript编写flappy bird

作者: 风小锐      新浪微博ID:永远de风小锐      QQ:547953539      转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...

浅谈JavaScript的Canvas(绘制图形)

HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5.通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小. 

随机推荐

JAVA反编工具件安装 JD-eclipse

想看Android  API源码,但是只有class文件,于是找了个反编译工具Java Decompiler,免费的反编译工具.eclipse插件:JD-eclipse. 安装步骤: 1.确保计算机上 ...

JSP执行过程详解

复习JSP的概念 JSP是Java Server Page的缩写,在传统的HTML页面中加入JSP标签和java的程序片段就构成了JSP. JSP的基本语法:两种注释类型.三个脚本元素.三个元素指令. ...

PM2.5空气质量指数(AQI)是如何计算的

AQI如何计算     具体要计算PM2.5空气质量指数(AQI),SENBE申贝技术人员向您介绍如何计算的公式.     比如当实测浓度小于等于0.035时,根据实测浓度×50/0.035计算.例如 ...

BestCoder Round #75 1001 - King's Cake

Problem Description It is the king's birthday before the military parade . The ministers prepared a ...

javascript脚本化文档

1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...

Text-文本检查

#检查文本 from tkinter import * import hashlib master=Tk() text = Text(master,width=30,height=5) text.pa ...

UNIX环境高级编程——实现uid to name

setpwent()用来将getpwent()的读写地址指回文件开头,即从头读取密码文件中的账号数据. strcut passwd * getpwent(void); getpwent()用来从密码文 ...

php框架之thinkphp

日常开发中经常使用thinkphp5进行开发工作,总结一些使用中遇到的问题和使用的东西 1. web内置服务 V5.1.5+版本开始,增加了启动内置服务器的指令,方便测试 >php think ...

洛谷P3380 二逼平衡树

线段树+平衡树 我!又!被!卡!常!了! 以前的splay偷懒的删除找前驱后继的办法被卡了QAQ 放一个在洛谷开O2才能过的代码..我太菜了.. #include

仁由仁由
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
第1章　基础知识 1 1.1　canvas元素 1 1.1.1　canvas元素的大小与绘图表面的大小 4 1.1.2　canvas元素的api 5 1.2　canvas的绘图环境 6 1.2.1　2d绘图环境 6 1.2.2　canvas状态的保存与恢复 8 1.3　本书程序清单的规范格式 9 1.4　开始学习html5 10 1.4.1　规范 10 1.4.2　浏览器 11 1.4.3　控制台与调试器 11 1.4.4　性能 13 1.5　基本的绘制操作 15 1.6　事件处理 18 1.6.1　鼠标事件 18 1.6.2　键盘事件 22 .1.6.3　触摸事件 23 1.7　绘制表面的保存与恢复 23 1.8　在canvas中使用html元素 25 1.9　打印canvas的内容 32 1.10　离屏canvas 35 1.11　基础数学知识简介 37 1.11.1　求解代数方程 37 1.11.2　三角函数 38 1.11.3　向量运算 39 1.11.4　根据计量单位来推导等式 42 1.12　总结 44 第2章　绘制 45 2.1　坐标系统 46 2.2　canvas的绘制模型 47 2.3　矩形的绘制 48 2.4　颜色与透明度 50 2 .5　渐变色与图案 52 2.5.1　渐变色 52 2.5.2　图案 54 2.6　阴影 57 2.7　路径、描边与填充 60 2.7.1　路径与子路径 63 2.7.2　剪纸效果 64 2.8　线段 69 2.8.1　线段与像素边界 70 2.8.2　网格的绘制 71 2.8.3　坐标轴的绘制 72 2.8.4　橡皮筋式的线条绘制 74 2.8.5　虚线的绘制 79 2.8.6　通过扩展canvasrenderingcontext2d来绘制虚线 80 2.8.7　线段端点与连接点的绘制 81 2.9　圆弧与圆形的绘制 83 2.9.1　arc()方法的用法 83 2.9.2　以橡皮筋式辅助线来协助用户画圆 85 2.9.3　arcto()方法的用法 86 2.9.4　刻度仪表盘的绘制 88 2.10　贝塞尔曲线 93 2.10.1　二次方贝塞尔曲线 93 2.10.2　三次方贝塞尔曲线 95 2.11　多边形的绘制 97 2.12　高级路径操作 102 2.12.1　拖动多边形对象 102 2.12.2　编辑贝塞尔曲线 107 2.12.3　自动滚动网页，使某段路径所对应的元素显示在视窗中 115 2.13　坐标变换 116 2.13.1　坐标系的平移、缩放与旋转 116 2.13.2　自定义的坐标变换 119 2.14　图像合成 123 2.15　剪辑区域 128 2.15.1　通过剪辑区域来擦除图像 128 2.15.2　利用剪辑区域来制作伸缩式动画 133 2.16　总结 135 第3章　文本 137 3.1　文本的描边与填充 137 3.2　设置字型属性 141 3.3　文本的定位 144 3.3.1　水平与垂直定位 144 3.3.2　将文本居中 146 3.3.3　文本的度量 147 3.3.4　绘制坐标轴旁边的文本标签 148 3.3.5　绘制数值仪表盘周围的文本标签 151 3.3.6　在圆弧周围绘制文本 152 3.4　实现文本编辑控件 154 3.4.1　指示文本输入位置的光标 154 3.4.2　在canvas中编辑文本 159 3.4.3　文本段的编辑 163 3.5　总结 174 第4章　图像与视频 175 4.1　图像的绘制 176 4.1.1　在canvas之中绘制图像 176 4.1.2　drawimage()方法的用法 177 4.2　图像的缩放 179 4.3　将一个canvas绘制到另一个canvas之中 183 4.4　离屏canvas 186 4.5　操作图像的像素 189 4.5.1　获取图像数据 189 4.5.2　修改图像数据 195 4.6　结合剪辑区域来绘制图像 208 4.7　以图像制作动画 211 4.8　图像绘制的安全问题 216 4.9　性能 216 4.9.1　对比drawimage(htmlimage)、drawimage(htmlcanvas)与putimagedata()的绘图效率 217 4.9.2　在canvas中绘制另一个canvas与绘制普通图像之间的对比；在绘制时缩放图像与保持原样之间的对比 217 4.9.3　遍历图像数据 218 4.10　放大镜 222 4.10.1　使用离屏canvas 224 4.10.2　接受用户从文件系统中拖放进来的图像 225 4.11　视频处理 227 4.11.1　视频格式 227 4.11.2　在canvas中播放视频 229 4.11.3　视频处理 230 4.12　总结 234 第5章　动画 235 5.1　动画循环 235 5.1.1　通过requestanimationframe()方法让浏览器来自行决定帧速率 237 5.1.2　internet explorer浏览器对requestanimationframe()功能的实现 241 5.1.3　可移植于各浏览器平台的动画循环逻辑 241 5.2　帧速率的计算 248 5.3　以不同的帧速率来执行各种任务 249 5.4　恢复动画背景 250 5.4.1　利用剪辑区域来处理动画背景 250 5.4.2　利用图块复制技术来处理动画背景 252 5.5　利用双缓冲技术绘制动画 253 5.6　基于时间的运动 254 5.7　背景的滚动 257 5.8　视差动画 261 5.9　用户手势 264 5.10　定时动画 266 5.10.1　秒表 266 5.10.2　动画计时器 269 5.11　动画制作的最佳指导原则 270 5.12　总结 271 第6章　精灵 272 6.1　精灵概述 273 6.2　精灵绘制器 275 6.2.1　描边与填充绘制器 275 6.2.2　图像绘制器 279 6.2.3　精灵表绘制器 281 6.3　精灵对象的行为 284 6.3.1　将多个行为组合起来 285 6.3.2　限时触发的行为 287 6.4　精灵动画制作器 289 6.5　基于精灵的动画循环 293 6.6　总结 294 第7章　物理效果 295 7.1　重力 295 7.1.1　物体的下落 296 7.1.2　抛射体弹道运动 298 7.1.3　钟摆运动 307 7.2　时间轴扭曲 311 7.3　时间轴扭曲函数 315 7.4　时间轴扭曲运动 317 7.4.1　没有加速度的线性运动 319 7.4.2　逐渐加速的缓入运动 320 7.4.3　逐渐减速的缓出运动 322 7.4.4　缓入缓出运动 323 7.4.5　弹簧运动与弹跳运动 324 7.5　以扭曲后的帧速率播放动画 326 7.6　总结 332 第8章　碰撞检测 333 8.1　外接图形判别法 333 8.1.1　外接矩形判别法 333 8.1.2　外接圆判别法 334 8.2　碰到墙壁即被弹回的小球 336 8.3　光线投射法 337 8.4　分离轴定理（sat）与最小平移向量（mtv） 340 8.4.1　使用分割轴定理检测碰撞 340 8.4.2　根据最小平移向量应对碰撞 362 8.5　总结 373 第9章　游戏开发 374 9.1　游戏引擎 374 9.1.1　游戏循环 376 9.1.2　加载图像 382 9.1.3　同时播放多个声音 384 9.1.4　键盘事件 385 9.1.5　高分榜 386 9.1.6　游戏引擎源代码 387 9.2　游戏原型 395 9.2.1　游戏原型程序的html代码 396 9.2.2　原型程序的游戏循环 399 9.2.3　游戏原型程序的加载画面 400 9.2.4　暂停画面 402 9.2.5　按键监听器 404 9.2.6　游戏结束及高分榜 404 9.3　弹珠台游戏 407 9.3.1　游戏循环弹珠 408 9.3.2　弹珠精灵 410 9.3.3　重力与摩擦力 411 9.3.4　弹板的移动 412 9.3.5　处理键盘事件 413 9.3.6　碰撞检测 416 9.4　总结 425 第10章　自定义控件 426 10.1　圆角矩形控件 427 10.2　进度条控件 433 10.3　滑动条控件 437 10.4　图像查看器控件 446 10.5　总结 454 第11章　移动平台开发 455 11.1　移动设备的视窗 456 11.2　媒体特征查询技术 461 11.2.1　媒体特征查询与css 461 11.2.2　用javascript程序应对媒体特征的变化 462 11.3　触摸事件 464 11.3.1　touchevent对象 464 11.3.2　touchlist对象 465 11.3.3　touch对象 466 11.3.4　同时支持触摸事件与鼠标事件 466 11.3.5　手指缩放 468 11.4　ios5 469 11.4.1　应用程序图标及启动画面 469 11.4.2　利用媒体特征查询技术设置ios5系统的应用程序图标及启动画面 470 11.4.3　以不带浏览器饰件的全屏模式运行应用程序 471 11.4.4　应用程序的状态栏 471 11.5　虚拟键盘 472 11.6　总结 485
0.12-Landscapes_Canvas：“画布上的几何景观”
02-15
Forest_Canvas这个分支的支路笔直而弯曲，山峦弯曲，还具有不同形状和大小的树木，并且在底部是一个小湖，因此其景观设计更加专业和复杂。 所有颜色均通过渐变或RGBA制成 作者 :black_nib: Juan 初始工作，文档 ...
H5_0009：关于HTML5中Canvas的宽、高设置问题
weixin_30539625的博客
05-14 183
关于HTML5中Canvas的宽、高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸)： 方法一： <canvaswidth="500" height="500"></canvas> 方法二：使用HTML5 Canvas API操作 OK var canvas = do...
html5 Canvas 如何自适应屏幕大小
iteye_18569的博客
09-04 2619
最简单使用Canvas元素： 这样就创建出一个空白画布。 但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要， 因为我们会经常改变浏览器窗口大小，不会一直保持某个固定的大小。 首先可以先准备一个canvas.css 放到html文件的同一目录下，css内容： [code="javascript"]* { margin: 0; padd...
html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
weixin_30724041的博客
06-04 4756
在CSS中，想要改变背景图片的大小，可以通过设置background-size属性来实现。下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法，希望对大家有所帮助。background-size属性规定背景图像的尺寸，可通过长度值或百分比来设置图片大小，或者通过cover和contain来对图片进行伸缩设置。语法：background-size: length...
html5-canvas 图片缩放图像以适合或填充
allway2的博客
10-08 1279
html5-canvas图片缩放图像以适合或填充。 例子# 缩放以适应 意味着整个图像将可见，但如果图像与画布的外观不同，则侧面或顶部和底部可能会有一些空白空间。该示例显示了缩放以适合的图像。侧面的蓝色是由于图像与画布的外观不同。 正在上传…重新上传取消​ 缩放以填充 意味着缩放图像，以便图像覆盖所有画布像素。如果图像方面与画布不同，则图像的某些部分将被剪裁。该示例显示了缩放以填充的图像。请注意图像的顶部和底部是如何不再可见的。 正在上传…重新上传取消​ 示例缩放以适...
HTML5 Canvas背景图自适应铺满屏幕宽高 - 已解决图片模糊问题
土拨鼠博客
05-29 3292
这里提供的是vue版本的Canvas实例，如需要其它版本可自行更改 template <canvas id="myCanvas" :width="rowWidth" :height="rowHeight"></canvas> <!-- width跟height是必填，不然后面计算很难排错 --> data data() { return { rowHeight: '', rowWidth: '' } }, mounted mounted() { this
HTML5利用canvas压缩图片（不改变图片宽和高）
一捆铁树枝的博客
11-15 3677
最近项目中有一个手机拍照上传的需求，现在的智能手机摄像头像素很高，拍出来的照片大小大都在5M左右，当手机在上传图片时遇到了问题，之前采用的方法是将图片先进行Base64编码，然后上传到服务器，结果因为图片太大，导致服务器老是回复超时错误；权衡之下决定在图片上传之前先将图片压缩； 以下为我采用方法的源码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...
html转换成canvas
09-24 332
使用的工具是：html2canvas html2canvas(this.currentRef) .then(async (canvas) => { let url = canvas.toDataURL('image/png') this.largeScreenForm.screenshotImage =...
Touhou.js:基于HTML5和Canvas的东方二次创作
04-29
使用Canvas实现的东方二次创作 注意 asset文件夹内部有许多未授权引用的外部文件，来源将后续在wiki中补充 需要慢速切换场景时，设置 config.json "FastStart": false 准备重构为新项目 如何使用 release版本可以...
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
4.1　使用canvas元素 102 4.2　绘图 103 4.3　坐标变换 118 4.4　控制叠加风格 123 4.5　控制填充风格 124 4.6　位图处理 128 4.7　输出位图 132 4.8　动画制作 133 4.9　本章小结 136 第5章　HTML 5的多媒体支持 ...
html页面调节图片大小,怎么用css设置图片大小？
热门推荐
weixin_33557333的博客
06-03 3万+
在制作html页面中，经常需要使用css来改变图片的大小来实现想要的效果，css设置图片大小有几种方法。下面本篇文章举例讲解怎么用css设置图片大小，有需要的朋友可以参考一下，希望对大家有所帮助。使用css设置图片大小1、新建一个html文件，命名为test.html，用于讲解CSS怎么改变图片的大小。2、在test.html文件中，使用div标签创建一个模块，在div标签内，使用img标签创建一...
HTML5语言如何更改图片大小,HTML5在上传前预先调整图片大小
weixin_29862397的博客
05-31 248
是的，使用File API，然后可以使用canvas element处理图像。This Mozilla Hacks blog post引导您完成大部分的过程。参考这里是源自博客文章的源代码：// from an input elementvar filesToUpload = input.files;var file = filesToUpload[0];var img = document.cr...
HTML5获取图片原图尺寸
kylin_zdd的专栏
07-03 3330
获取图片显示尺寸在js中可以通过width和height来获取显示的宽高。 在jQuery中可以通过width()方法和height()方法来获取显示的宽高。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https:/
html2canvas在不同设备生成图片大小不一致问题
小圣贤君的博客
11-29 6514
场景描述： 使用html2canvas将移动端的一整个页面或者页面中的部分内容生成图片。 当要生成的内容宽高不固定时，比如：全屏显示的页面，那么，在不同分辨率设备上，就会生成出不同大小的图片，虽然生成的图片与设备显示的样式几乎一样，但是，不同的设备生成的图片就还有不小的差异，有的需求是想要生成大小一样的图片，无论在IOS或者安卓设备上，比如你生成的这张图片是一张宣传海报，那么固定尺寸的图片会有更好...
Canvas实现自定义图片大小（Vue）
xtcyolo的博客
12-01 2534
实现思路：1、把上传图片利用FileReader的方法转为一个base64字节码2、使用Image对象来把base64字节码加载为一个图片3、使用canvas把Image图片画出来，在画的时候可以实现绘制的缩放4、用canvas.toDataURL把缩放图片转换为base64,给到页面图片的src。
杭州电子科技大学数据结构(题目).pdf
最新发布
04-26
杭州电子科技大学，期末考试资料，计算机专业期末考试试卷，试卷及答案，数据结构。
js 压缩html 图片上传,js canvas 前端实现修改图片尺寸压缩图片大小
05-17
压缩HTML： 可以使用多种工具来压缩HTML，例如HTMLMinifier或UglifyJS等。这些工具可以删除不必要的空格、注释和其他字符，从而减小文件大小。以下是使用HTMLMinifier进行HTML压缩的示例代码： ```javascript const html = '<html><head><title>Hello World</title></head><body><p>Hello, world!</p></body></html>'; const minifiedHtml = htmlMinifier.minify(html, { collapseWhitespace: true, removeComments: true, minifyCSS: true, minifyJS: true }); ``` 图片上传： 可以使用HTML5的File API来实现图片上传。以下是一个基本的示例： ```html <input type="file" id="upload-input"> <script> const input = document.getElementById('upload-input'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const imageData = event.target.result; // 图片数据 // 将图片数据上传到服务器 }; reader.readAsDataURL(file); }); </script> ``` JS Canvas 修改图片尺寸和压缩大小： 可以使用canvas的API来修改图片的尺寸和压缩图片大小。以下是一个基本的示例： ```html <input type="file" id="upload-input"> <canvas id="canvas"></canvas> <script> const input = document.getElementById('upload-input'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { // 计算缩小后的尺寸 const maxWidth = 300; const maxHeight = 300; let width = img.width; let height = img.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; // 绘制缩小后的图片 context.drawImage(img, 0, 0, width, height); // 压缩图片 const quality = 0.7; const imageData = canvas.toDataURL('image/jpeg', quality); // 将图片数据上传到服务器 }; img.src = event.target.result; }; reader.readAsDataURL(file); }); </script> ``` 以上是一个基本的实现，具体的实现方式可以根据需求进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值