canvas里面画图片高度老是不对的梗

1.前言

  最近自己写了一个移动端图片裁剪的小工具,用的是canvas和FileReader。

  由于图片裁切是可以设置按比例裁剪还是固定尺寸裁剪。

2.发现问题

  这个梗就是:我一开始做的时候,在页面初始化dom里面直接写的<canvas width="width" height="height"></canvas>,然后再根据设置参数计算canvas的真实高度并赋值。

var canvas = document.querySelector(‘#canvas‘);
var ctx = canvas.getContent(‘2d‘);
canvas.width = calc.width;
canvas.height = calc.height;

ctx.drawImage(img, 0, 0, img.width, img.height);

  这个时候问题就出现了,画出来的图片宽度没为题,死活就是不对(宽高1:1的图片,画出来高度居然大于宽度。代码删了,没有找到历史截图)。

3.解决问题

  后来苦死半天,是不是因为我改了canvas高度的问题?

  我就动态生成canvas标签,并设置宽高,果然解决了问题。

4.引申

  刚才在写上面的代码的时候,突然想到:设置canvas的width和height是在var ctx = canvas.getContent(‘2d‘)之前。

  如果是在getContent(‘2d‘)之后设置canvas的width和height是不是就没问题了呢?可以试一试。

时间: 2024-10-16 20:29:43

canvas里面画图片高度老是不对的梗的相关文章

HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识

一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas" width="600" height="300">您的浏览器不支持canvas,可以选择升级您的浏览器</canvas> 2 开发基于canvas的应用程序的最基本的几个操作 1),使用document.getElementById()方

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

【HTML5】Canvas 实现放大镜效果

目录 图片放大镜 效果 原理 初始化 画背景图片 计算图片被放大的区域的范围 绘制放大镜区域 添加鼠标事件 图表放大镜 原理 绘制原始线段 计算原始区域和放大镜区域 计算线段在新坐标系统的位置 绘制放大镜中心点 绘制放大镜 添加事件 图片放大镜 效果 在线演示    源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id="canvas" width="500"

canvas ---1

Canvas1 (关键词:canvas) canvas :就是html5中提供的一个标签,只是用来展示绘图的内容 canvas  标签的默认宽高:300*150 如果给canvas来设置高度和宽度 一般情况就是html的width 和 height属性 通过js来设置宽度和高度 不管是通过html的属性(width/height) 还是直接通过DOM来设置(width/height ),属性都是在设置canvas画布中的像素点 注意:不要通过css样式属性来设置高度和宽度,因为这里的高度和宽度不

canvas时钟绘制

index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟</title> <style> div{ text-align: center; margin-top: 250px; } </style> </head> <body> <d

canvas之特丑时钟

感觉是不是特想送钟,老是编写些时钟的效果,今日就发个丑丑的时钟,老实说 有没有什么调试canvas的工具,老是要在浏览器刷新查看效果,好累啊~ (┬_┬) 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background

canvas 基础知识整理

canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8> <title>Document</title> <style> #myCanv

Canvas 绘图使用语法

1.canvas标签 <canvas  width=""  height=""  id=""> 您的浏览器不支持canvas,请更换浏览器! *注:canvas的宽高度最好设置成行内样式,不然会等比变化 例如:在嵌入样式中设置canvas 宽高为:500px X 500px 在canvas中画100px * 100px 的矩形,矩形宽高会等比变化 500/300 : 500/150 = x/100 : y/100; </canv

canvas画圆类似于锯齿指针 angular5

拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angular5,所以获取元素时,要用到ElementRef;直接引用就好: 先来看下页面: import {Component, OnInit, ElementRef, ViewChild, OnDestroy} from "@angular/core";export class LoginCom