html5 canvas 图像处理

左手的ㄟ右手 2021-12-22 10:39 368阅读 0赞

1.图像放大缩小

<script>
            var cvs = document.getElementById("canvas");
            cvs.width = 320
            cvs.height = 213;
            var context = cvs.getContext("2d");
            var range = document.getElementById("range");
            var img = new Image();
            window.onload = function () {
                img.src = "imgs/back.jpg";
                img.onload = function () {
                    drawImg(1);
                }
            }
            function drawImg(scale) {
                context.clearRect(0, 0, cvs.width, cvs.height);
                var w = scale * img.width;
                var h = scale * img.height;
                var dx = cvs.width / 2 - w / 2;
                var dy = cvs.height / 2 - h / 2;
                context.drawImage(img, dx, dy, w, h);
            }
            range.onmousemove = function () {
                var v = this.value;
                drawImg(v);
            }
        </script>

<canvas id="canvas"></canvas>
        
        <input id="range" type="range" min="0.5" max="3.0" value="1.0" style="width:600px;" step="0.1" />

上面是通过滑动来放大缩小图像的，在canvas上使用 dragImage()，可以把一张图像绘制到画布上。

![462111-20160131201605849-505237835.jpg][]

drawImage不仅能加载图片，还能加载canvas:

![462111-20160131201724943-1855252350.jpg][]

2.对图像加水印

可以在一个画布上加载另一个画布的方法来对图片加水印

<canvas id="canvas"></canvas>
        <input id="range" type="range" min="0.5" max="3.0" value="1.0" style="width:600px;" step="0.1" />
        <canvas id="canvas1" style="display:none"></canvas>

<script>
            var cvs = document.getElementById("canvas");
            cvs.width = 600
            cvs.height = 600;
            var context = cvs.getContext("2d");
            var range = document.getElementById("range");
    
            var cvs1 = document.getElementById("canvas1");
            cvs1.width = 600;
            cvs1.height = 100;
    
            context1 = cvs1.getContext("2d");
            var img = new Image();
            window.onload = function () {
                img.src = "images/1-1.jpg";
                img.onload = function () {
                    drawImg(1);
                }
    
                context1.font = "bold 50px Arial";
                context1.fillStyle = "rgba(255,255,255,0.5)";
                context1.textBaseline = "middle";
                context1.fillText("==www.sina.mtn==", 20, 50);
    
            }
            function drawImg(scale) {
                context.clearRect(0, 0, cvs.width, cvs.height);
                var w = scale * img.width;
                var h = scale * img.height;
                var dx = cvs.width / 2 - w / 2;
                var dy = cvs.height / 2 - h / 2;
                context.drawImage(img, dx, dy, w, h);
                context.drawImage(canvas1, cvs.width - cvs1.width, cvs.height - cvs1.height);
            }
            range.onmousemove = function () {
                var v = this.value;
                drawImg(v);
            }
        </script>

3.图片复制：从画布A得到画布图像，放到画布B上

var dirImg= ctxA.getImageData(0, 0, cvsA.width, cvsA.height);

ctxB.putImageData(dirImg, 0, 0);

putImageData还有四个参数，可以参考下图：

![462111-20160131215124302-659811380.jpg][]

转载于:https://www.cnblogs.com/lunawzh/p/5174051.html

[462111-20160131201605849-505237835.jpg]: /images/20211220/21ed88859de745ff9d6656919084f9b1.png
[462111-20160131201724943-1855252350.jpg]: /images/20211220/8d0d0c5723444f9687bbf4d5d97e395f.png
[462111-20160131215124302-659811380.jpg]: /images/20211220/7f70ed18e2a1441bac68bfd715cbe98d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas

Canvas画布描述获取方式注意点画布API 上下文API 颜色、样式和阴影线条样式

落日映苍穹つ/ 2023年01月10日 13:13/ 0 赞/ 159 阅读

相关 HTML5：Canvas 标签

什么是 canvas？ H5 `<canvas>` 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。`<canvas>` 标签只是图形容器，必须使用脚本

逃离我推掉我的手/ 2022年10月11日 13:33/ 0 赞/ 306 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 257 阅读

相关 html5绘制div,HTML5 Canvas 绘制图像

canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG，GIF，JPEG等)都可以引入到 canvas 中，而且其它的 canv

本是古典何须时尚/ 2022年10月06日 13:56/ 0 赞/ 284 阅读

相关 html5canvas网格制作,HTML5 Canvas网格变换

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 (function() \{ var TriangleGrid, anim

╰+攻爆jí腚メ/ 2022年10月06日 13:50/ 0 赞/ 229 阅读

相关 HTML5 canvas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年07月19日 11:48/ 0 赞/ 267 阅读

相关 HTML5Canvas

Canvas -> 做游戏：白鹭引擎、trees... 动画图表、频谱画图 HTML5 不只是单纯HTML 本身是一个标签 <canvas></canva

素颜马尾好姑娘i/ 2022年06月10日 05:19/ 0 赞/ 299 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 363 阅读

相关 HTML 5 Canvas 绘制图形图像

目录 HTML5 Canvas 创建一个画布（Canvas） JavaScript 绘制图像颜色、样式和阴影线条样式，矩形路径转换，文本图像绘制，

港控/mmm°/ 2022年04月17日 04:53/ 0 赞/ 381 阅读

相关 html5 canvas 图像处理

1.图像放大缩小 <script> var cvs = document.getElementById("canvas");

左手的ㄟ右手/ 2021年12月22日 10:39/ 0 赞/ 369 阅读