有关Canvas的一点小事—canvas和resize
之前就说了canvas设置大小的时候用的就是设置实打实的像素值,像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小。不过项目之前有用到过,既然去了解了,就记下来防止忘记。
不能自己适应,就只能每次外部容器发生改变的时候给它重新设置大小了。
1、 $(selector).resize()—布局调整大小的时候触发
查了查jquery好像有resize函数,顿时很惊喜,然而发现并没有什么用,它只支持$(window).resize(function(){});在某些情况这个就够用了,但是之前我明显用不了。
刚好查到了一个自定义的resize()函数,但是由于过去有点久,又没有留下记录,不知道是谁的代码了,是基于jq的代码。如下:
//监听div大小变化 (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "throttleWindow"; e[b] = 250; e[f] = true; $.event.special[j] = { setup: function() { if (!e[f] && this[k]) { return false; } var l = $(this); a = a.add(l); $.data(this, d, { w: l.width(), h: l.height() }); if (a.length === 1) { g(); } }, teardown: function() { if (!e[f] && this[k]) { return false; } var l = $(this); a = a.not(l); l.removeData(d); if (!a.length) { clearTimeout(i); } }, add: function(l) { if (!e[f] && this[k]) { return false; } var n; function m(s, o, p) { var q = $(this), r = $.data(this, d); r.w = o !== c ? o: q.width(); r.h = p !== c ? p: q.height(); n.apply(this, arguments); } if ($.isFunction(l)) { n = l; return m; } else { n = l.handler; l.handler = m; } } }; function g() { i = h[k](function() { a.each(function() { var n = $(this), m = n.width(), l = n.height(), o = $.data(this, d); if (m !== o.w || l !== o.h) { n.trigger(j, [o.w = m, o.h = l]); } }); g(); }, e[b]); } })(jQuery, this);
resize.js
2、 更改canvas的大小
canvas.width和canvas.height是canvas本身的属性,可以直接赋值修改。但是修改canvas的大小的同时会导致canvas内容的丢失,你需要保存原本的canvas的信息,然后再将信息放到已经改变好大小的canvas上,有下面两种方法。
<1>toDataURL() + new Image() + drawImage()
获取图像的base64信息,然后利用构造新的图像对象和ctx.drawImage(img, 0, 0, newwidth, newheight)进行缩放,也支持scale()缩放。
a)不使用scale()
var base64 = c.toDataURL(); c.width=contain.offsetWidth;//父元素的大小 c.height=contain.offsetHeight; var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0,c.width,c.height);//进行缩放 } img.src = base64;
b)使用scale()
var base64 = c.toDataURL(); c.width=contain.offsetWidth; c.height=contain.offsetHeight; ctx.scale(c.width/width,c.height/height);//进行缩放,width/height是原canvas的大小 var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0,width,height); } img.src = base64;
这个方法比较好,但是受同源限制,单单跑html的时候如果想要对加载了图片的canvas进行操作可不行,需要跑到http上。
2、getImageData() + putImageData()
保存像素矩阵,然后把像素矩阵放到新画布上,不会缩放,也不受scale()影响。如果要等比例缩放,需要自己对像素矩阵进行操作。同样受同源限制。
var data=ctx.getImageData(0,0,width,height); var base64 = c.toDataURL(); c.width=contain.offsetWidth; c.height=contain.offsetHeight; ctx.putImageData(data,0,0);
完整代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script src='js/jquery-3.3.1.min.js'></script>
<script src='js/resize.js'></script>
<style>
body{
//background:black;
text-align:center;
}
#myCanvas{
background:white;
border:1px solid black;
}
#contain{
margin:0 auto;
width:30%;
height:40px; }
#scream{
width:100%;
}
img{
margin-top:10px;
border:1px solid red;
} </style>
</head>
<body>
<div id="contain">
<canvas id="myCanvas"></canvas>
</div>
<script type="text/javascript">
$(document).ready(function(){
var contain = document.getElementById('contain');
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width=contain.offsetWidth;
c.height=contain.offsetHeight;//***根据容器大小设置宽和高 /****如果是本地图片绘制的img受同源限制,报错
var img= new Image();
img.onload=function(){
ctx.drawImage(img,0,0);
var data = ctx.getImageData(0,0,2,2);//获取像素点
console.log(data); }
img.src="img/6.png";
//*/
//****不能用图片展示,画个对角线试试
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(c.width,c.height);
ctx.stroke();
ctx.closePath();
//容器大小发生改变触发
$('#contain').resize(function(){
var width = c.width;
var height = c.height;
var data=ctx.getImageData(0,0,width,height);//获取像素点
var base64 = c.toDataURL();//获取base64
c.width=contain.offsetWidth;
c.height=contain.offsetHeight;
//ctx.scale(c.width/width,c.height/height);
//ctx.putImageData(data,0,0);//放置像素矩阵,不会缩放,超出部分会丢失
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0,c.width,c.height);//利用base64图像进行缩放
//ctx.drawImage(img,0,0,width,height);
}
img.src = base64; }); });
</script>
</body>
</html>
参考:
同源限制:
https://blog.csdn.net/u013040887/article/details/78986598
有关Canvas的一点小事—canvas和resize的更多相关文章
- 有关Canvas的一点小事—canvas数据和像素点
1. canvas生成base64数据 canvas.toDataURL()生成的数据可以直接给image对象使用作为<img>显示在前端,也可以传给后台生成图片保存.前端生成保存图片的 ...
- 有关Canvas的一点小事--鼠标绘图
1. 如何根据鼠标位置获取canvas上对应位置的x,y. 2. canvas的图糊了,设置宽和高的方式不对. 3.鼠标绘图代码 之前听说过canvas这个元素,但是实际上并没有深入了解过.不过日 ...
- 有关Canvas的一点小事—图像绘制
1. 使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...
- 【canvas系列】用canvas实现一个colorpicker
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- canvas学习笔记:canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
随机推荐
- css3透明度
http://www.haorooms.com/post/css_common //透明度 div{ background: #00c2de; opacity: 0.9; filter: alpha( ...
- box-shadow制作各种单边,多边阴影
一.box-shadow问题探究 box-shadow 在MDN定义以及详解: box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果.该属性让你可以对几乎所有元素的边框产生阴影.如果元素同 ...
- 《TensorFlow学习指南深度学习系统构建详解》英文PDF+源代码+部分中文PDF
主要介绍如何使用 TensorFlow 框架进行深度学习系统的构建.涉及卷积神经网络.循环神经网络等核心的技术,并介绍了用于图像数据和文本序列数据的模型.给出了分布式深度学习系统在TensorFlow ...
- img下面的留白解决
在做网页的时候经常会出现一个令人困惑的现象.那就是行内元素和块级元素之间会出现“留白”.就是块级元素中明明只有一个行内元素,但行内元素却不会铺满块级元素.像这个例子: “留白”出现的原因 行内元素默认 ...
- Asp.Net Core 之 appsettings.json
原文:Asp.Net Core 之 appsettings.json appsettings.json是什么? 相信大家在.Net Framework的项目都会用的web.config,app.con ...
- Mybatis mapper.xml文件头文件备份
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...
- <LeetCode OJ> 20. Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- tcp_tw_recycle检查tcp_timestamps的内核代码
注意:本文档中的内核代码的版本号:linux-4.0.5 /************************************************* * Author : Samson * ...
- hdoj-1593-find a way to escape【数学题】
find a way to escape Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- Atcoder ABC 071 C,D
C - Make a Rectangle Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement W ...