让你快速了解cavans针对图像处理一些操作的demo代码

最新推荐文章于 2023-11-08 15:34:32 发布
最新推荐文章于 2023-11-08 15:34:32 发布
阅读量294 收藏
点赞数
分类专栏： canvas JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/long5305350/article/details/98594038
版权
JS 同时被 2 个专栏收录
41 篇文章 0 订阅
订阅专栏
canvas
16 篇文章 0 订阅
订阅专栏

 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"
        integrity="sha256-B2A44YCanY9zaHL5nwcihGM3GiWpOE4md3COMTdAggM=" crossorigin="anonymous"></script>
    <meta charset="utf-8" />
    <script
        src="https://rawcdn.githack.com/fanyonglong/DxFrameworks/21a66621dd1652da71398f2168a27f0bc358060d/utility/exampleTool.js"></script>
    <style>
        canvas {
            border: solid 1px red;
        }
    </style>
</head>

<body>


    <script>

        var imageSrc = '../images/daitu.jpg';//'/assets/images/domokun.jpg'

        /*
        image
一个图像源, 可以是一个 <img>, SVG <image>, <video>, <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, ImageData, ImageBitmap, 或 OffscreenCanvas 对象.    
        */
        if (!('createImageBitmap' in window)) {
            window.createImageBitmap = async function (data) {
                return new Promise((resolve, reject) => {
                    let dataURL;
                    if (data instanceof Blob) {
                        dataURL = URL.createObjectURL(data);
                    } else if (data instanceof ImageData) {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        canvas.width = data.width;
                        canvas.height = data.height;
                        ctx.putImageData(data, 0, 0);
                        dataURL = canvas.toDataURL();
                    } else {
                        throw new Error('createImageBitmap does not handle the provided image source type');
                    }
                    const img = document.createElement('img');
                    img.addEventListener('load', function () {
                        resolve(this);
                    });
                    img.src = dataURL;
                });
            };
        }
        function createCanvas(width = 800, height = 600) {
            return $('<canvas>').attr({
                width: width,
                height: height
            }).css({
                border: 'solid 1px #888'
            });
            //    return d3.create('canvas').style('border', 'solid 1px #888').attr('width', width).attr('height', height);
        }
        var exmapleInstance = ExampleFactory(function (example) {

            return function (page) {
                page.onChange('init', function () {

                });
                page.onChange('show', function () {

                });
                page.onChange('hide', function () {

                });
                page.onChange('refresh', function () {

                });

                page.callback(page);

            }

        });
        dat.controllers.Controller.prototype.setTitle = function (title) {
            this.__li.firstElementChild.firstElementChild.setAttribute('title', title)
            return this;
        }
        function imageLoad(src) {
            return new Promise(function (resolve) {
                var img = new Image();
                img.onload = function () {
                    resolve(img);
                };
                img.src = src;
            })
        }
        exmapleInstance.addExample('DrawImage平铺', function (page) {
            var cvs = createCanvas(800, 600).appendTo(page.el)[0];
            var ctx = cvs.getContext('2d');
            var w = 50, h = 50;
            var imgResource;
            //drawImage(image, x, y, width, height)
            //这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小
            imageLoad(imageSrc).then(function (img) {

                for (var r = 0; r < 3; r++) {
                    for (var c = 0; c < 5; c++) {
                        ctx.drawImage(img, c * w, r * h, w, h)
                    }
                }
            })
        })
        /*
        image
        一个图像源, 可以是一个 <img>, SVG <image>, <video>, <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, ImageData, ImageBitmap, 或 OffscreenCanvas 对象.
        sx
        裁剪点x坐标.
        sy
        裁剪点y坐标.
        sw
        裁剪宽度,值可为负数.
        sh
        裁剪高度,值可为负数.
        options 可选
        为其设置选项的对象。可用的选项是:
        imageOrientation: 指示图像是按原样呈现还是垂直翻转.  none (默认不翻转) 或 flipY.
        premultiplyAlpha: 指示位图颜色通道由alpha通道预乘. 选择其一:none, premultiply, 或 default (默认).
        colorSpaceConversion: 指示图像是否使用色彩空间转换进行解码. none 或 default (默认). The value default indicates that implementation-specific behavior is used.
        resizeWidth: 指示新宽度的长整数。
        resizeHeight: 指示新高度的长整数。
        resizeQuality: 指定图像缩放算法. 选择其一pixelated, low (默认), medium, 或 high.
        */
        exmapleInstance.addExample('createImageBitmap', function (page) {
            var cvs = createCanvas(800, 600).appendTo(page.el)[0];
            var ctx = cvs.getContext('2d');
            var w = 50, h = 50;
            var imgResource;
            //drawImage(image, x, y, width, height)
            //这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小
            imageLoad(imageSrc).then(function (img) {
                //img.width=800;
                //img.height=600;
                createOptionsGui({
                    sx:0,
                    sy:0,
                    sw:[img.width,10,img.width],
                    sh:[img.height,10,img.height],
                    imageOrientation:{
                        type:'options',
                        value:"none",
                        options:['none','flipY']
                    },
                    resizeWidth:[100,0,800],
                    resizeHeight:[100,0,600]
                },page.operation,{
                    immediately:true
                })(function(n,v,ops){
                    ctx.clearRect(0,0,800,600);
                    var imagebitmap=createImageBitmap(img,ops.sx,ops.sy,ops.sw,ops.sh,{
                        imageOrientation:ops.imageOrientation,
                        resizeWidth:ops.resizeWidth,
                        resizeHeight:ops.resizeHeight
                    })
                    imagebitmap.then(function(imagebitmap){
                        ctx.drawImage(imagebitmap,0,0);
                    })
           
                })
            })
        })

        exmapleInstance.addExample('createPattern平铺', function (page) {
            var cvs = createCanvas(800, 600).appendTo(page.el)[0];
            var ctx = cvs.getContext('2d');
            var w = 50, h = 50;
            var imgResource;
            /**
             * image
             作为重复图像源的 CanvasImageSource 对象。可以是下列之一：
             HTMLImageElement (<img>),
             HTMLVideoElement (<video>),
             HTMLCanvasElement (<canvas>),
             CanvasRenderingContext2D,
             ImageBitmap,
             ImageData,
             Blob.
             repetition
             DOMString，指定如何重复图像。允许的值有：
             "repeat" (both directions),
             "repeat-x" (horizontal only),
             "repeat-y" (vertical only), 
             "no-repeat" (neither).
             如果为空字符串 ('') 或 null (但不是 undefined)，repetition将被当作"repeat"。
            */
            imageLoad(imageSrc).then(function (img) {
                //img.width = w;
                //img.height = h;
                ctx.drawImage(img, 0, 0, 50, 50);
                var imgdata = ctx.getImageData(0, 0, 50, 50);
                /*
                options 可选
                为其设置选项的对象。可用的选项是:
                imageOrientation: 指示图像是按原样呈现还是垂直翻转.  none (默认不翻转) 或 flipY.
                premultiplyAlpha: 指示位图颜色通道由alpha通道预乘. 选择其一:none, premultiply, 或 default (默认).
                colorSpaceConversion: 指示图像是否使用色彩空间转换进行解码. none 或 default (默认). The value default indicates that implementation-specific behavior is used.
                resizeWidth: 指示新宽度的长整数。
                resizeHeight: 指示新高度的长整数。
                resizeQuality: 指定图像缩放算法. 选择其一pixelated, low (默认), medium, 或 high.
                */
             
                imgdata = createImageBitmap(img, 0, 0, img.width, img.height,{
                    resizeWidth:50,
                    resizeHeight:50
                });//ctx.createImageData(imgdata)
                imgdata.then(function (imageBitmap) {
                    createOptionsGui({
                        repeat: {
                            type: "options",
                            value: 'repeat',
                            options: ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']
                        }
                    }, page.operation, {
                            immediately: true
                        })(function (n, v, ops) {
                            ctx.clearRect(0, 0, 800, 600);
                           // ctx.drawImage(imageBitmap,0,0)
                            var pattern = ctx.createPattern(imageBitmap, ops.repeat);
                            ctx.fillStyle = pattern;
                            ctx.fillRect(0,0,800,600);
                           // ctx.arc(800 / 2, 300, 200, 0, Math.PI * 2)
                            ctx.fill();

                        })
                });

            })
        })
        exmapleInstance.addExample('DrawImage(缩放 Scaling)', function (page) {
            var cvs = createCanvas(400, 400).appendTo(page.el)[0];
            var ctx = cvs.getContext('2d');
            var gui = page.operation;

            /*
            void ctx.drawImage(image, dx, dy);
            void ctx.drawImage(image, dx, dy, dWidth, dHeight);
            void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
            sx可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
            sy可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。
            sWidth可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
            sHeight可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
            dx
            image的左上角在目标canvas上 X 轴坐标。
            dy
            image的左上角在目标canvas上 Y 轴坐标。
            dWidth可选
            image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
            dHeight可选
            image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
            */
            class DrawImage {
                constructor(object, gui) {
                    this.object = object;
                    this.dx = 0;
                    this.dy = 0;
                    this.dWidth = 400;
                    this.dHeight = 400;
                    gui = gui.addFolder('DrawImage');
                    gui.add(this, 'dx', 0, 400);
                    gui.add(this, 'dy', 0, 400);
                    gui.add(this, 'dWidth', 10, 400);
                    gui.add(this, 'dHeight', 10, 400);
                }
                drawImag(img) {
                    this.object.drawImage(img, this.dx, this.dy, this.dWidth, this.dHeight)
                }
            }
            class ImageDataGui {
                constructor(object, gui) {
                    this.object = object;
                    this.sx = 0;
                    this.sy = 0;
                    this.sw = 400;
                    this.sh = 400;

                    gui = gui.addFolder('getImageData')
                    // gui.add(this,'title').name('将要被提取的图像数据矩形区域的左上角 x 坐标')
                    gui.add(this, 'sx', 0, 400, 1).setTitle('将要被提取的图像数据矩形区域的左上角');

                    gui.add(this, 'sy', 0, 400, 1).setTitle('将要被提取的图像数据矩形区域的左上角 y 坐标')

                    gui.add(this, 'sw', 10, 400, 1).setTitle('将要被提取的图像数据矩形区域的宽度')
                    gui.add(this, 'sh', 10, 400, 1).setTitle('将要被提取的图像数据矩形区域的高度');
                }
                getImageData() {
                    return this.object.getImageData(this.sx, this.sy, this.sw, this.sh);
                }
            }
            class PutImageData {
                constructor(object, gui) {
                    this.object = object;
                    this.dx = 0;
                    this.dy = 0;
                    this.dirtyX = 0;
                    this.dirtyY = 0;
                    this.dirtyWidth = 400;
                    this.dirtyHeight = 400;
                    gui = gui.addFolder('putImageData');
                    gui.add(this, 'dx', 0, 400);
                    gui.add(this, 'dy', 0, 400);
                    gui.add(this, 'dirtyX', 0, 400);
                    gui.add(this, 'dirtyY', 0, 400);
                    gui.add(this, 'dirtyWidth', 10, 400);
                    gui.add(this, 'dirtyHeight', 10, 400);
                }
                putImageData(imagedata) {
                    this.object.putImageData(imagedata, this.dx, this.dy, this.dirtyX, this.dirtyY, this.dirtyWidth, this.dirtyHeight)
                }
            }
            var _DrawImage = new DrawImage(ctx, gui);
            var _ImageDataGui = new ImageDataGui(ctx, gui);

            var preview = createCanvas(400, 400), previewCtx = preview[0].getContext('2d');
            preview.appendTo(page.el)
            var putImageData = new PutImageData(previewCtx, gui)
            function render() {
                ctx.clearRect(0, 0, 400, 400);
                _DrawImage.drawImag(imgResource);
                var imageData = _ImageDataGui.getImageData();
                previewCtx.clearRect(0, 0, 400, 400);
                putImageData.putImageData(imageData);
                return true;
            }
            function init() {
                jQuery.fx.timer(render)

            }
            var imgResource;
            imageLoad(imageSrc).then(function (img) {
                page.el.appendChild(img);
                imgResource = img;
                init();
            })

        })
        exmapleInstance.addExample('DrawImage(切片)', function (page) {
            var cvs = createCanvas(400, 400).appendTo(page.el)[0];
            var ctx = cvs.getContext('2d');
            var gui = page.operation;

            /*
            void ctx.drawImage(image, dx, dy);
            void ctx.drawImage(image, dx, dy, dWidth, dHeight);
            void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
            sx可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
            sy可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。
            sWidth可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
            sHeight可选
            需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
            dx
            image的左上角在目标canvas上 X 轴坐标。
            dy
            image的左上角在目标canvas上 Y 轴坐标。
            dWidth可选
            image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
            dHeight可选
            image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
            */
            class DrawImage {
                constructor(object, gui,img) {
                    this.object = object;
                    this.sx = 0;
                    this.sy = 0;
                    this.sWidth = img.width;
                    this.sHeight = img.height;
                    this.dx = 0;
                    this.dy = 0;
                    this.dWidth = 400;
                    this.dHeight = 400;
                    gui = gui.addFolder('DrawImage');
                    gui.add(this, 'sx', 0, 400);
                    gui.add(this, 'sy', 0, 400);
                    gui.add(this, 'sWidth', 10, img.width);
                    gui.add(this, 'sHeight', 10, img.height);
                    gui.add(this, 'dx', 0, 400);
                    gui.add(this, 'dy', 0, 400);
                    gui.add(this, 'dWidth', 10, 400);
                    gui.add(this, 'dHeight', 10, 400);
                }
                drawImag(img) {
                    this.object.drawImage(img, this.sx, this.sy, this.sWidth, this.sHeight, this.dx, this.dy, this.dWidth, this.dHeight)
                }
            }
            class ImageDataGui {
                constructor(object, gui) {
                    this.object = object;
                    this.sx = 0;
                    this.sy = 0;
                    this.sw = 400;
                    this.sh = 400;

                    gui = gui.addFolder('getImageData')
                    // gui.add(this,'title').name('将要被提取的图像数据矩形区域的左上角 x 坐标')
                    gui.add(this, 'sx', 0, 400, 1).setTitle('将要被提取的图像数据矩形区域的左上角');

                    gui.add(this, 'sy', 0, 400, 1).setTitle('将要被提取的图像数据矩形区域的左上角 y 坐标')

                    gui.add(this, 'sw', 10, 400, 1).setTitle('将要被提取的图像数据矩形区域的宽度')
                    gui.add(this, 'sh', 10, 400, 1).setTitle('将要被提取的图像数据矩形区域的高度');
                }
                getImageData() {
                    return this.object.getImageData(this.sx, this.sy, this.sw, this.sh);
                }
            }
            class PutImageData {
                constructor(object, gui) {
                    this.object = object;
                    this.dx = 0;
                    this.dy = 0;
                    this.dirtyX = 0;
                    this.dirtyY = 0;
                    this.dirtyWidth = 400;
                    this.dirtyHeight = 400;
                    gui = gui.addFolder('putImageData');
                    gui.add(this, 'dx', 0, 400);
                    gui.add(this, 'dy', 0, 400);
                    gui.add(this, 'dirtyX', 0, 400);
                    gui.add(this, 'dirtyY', 0, 400);
                    gui.add(this, 'dirtyWidth', 10, 400);
                    gui.add(this, 'dirtyHeight', 10, 400);
                }
                putImageData(imagedata) {
                    this.object.putImageData(imagedata, this.dx, this.dy, this.dirtyX, this.dirtyY, this.dirtyWidth, this.dirtyHeight)
                }
            }
            
            imageLoad(imageSrc).then(function (img) {
       
           
                    var _DrawImage = new DrawImage(ctx, gui,img);
                var _ImageDataGui = new ImageDataGui(ctx, gui);

                var preview = createCanvas(400, 400), previewCtx = preview[0].getContext('2d');
                preview.appendTo(page.el)
                var putImageData = new PutImageData(previewCtx, gui)
                function render() {
                    ctx.clearRect(0, 0, 400, 400);
                    _DrawImage.drawImag(img);
                    var imageData = _ImageDataGui.getImageData();
                    previewCtx.clearRect(0, 0, 400, 400);
                    putImageData.putImageData(imageData);
                    return true;
                }
                page.el.appendChild(img);
                jQuery.fx.timer(render)
            })

        })
    </script>
</body>

</html>

 

很甜的西瓜
关注
专栏目录
OpenCV-Day-009:不同色彩空间的转换
惊鸿若梦一书生
05-24 406
前言 一、常见色彩空间 RGB色彩空间 HSV色彩空间 HSV是一种比较直观的颜色模型，所以在许多图像编辑工具中应用比较广泛，这个模型中颜色的参数分别是：色调（H, Hue），饱和度（S,Saturation），明度（V, Value）。 2.利用openCV中cvSplit函数的在选择图像IPL_DEPTH_32F类型时，H取值范围是0-360，S取值范围是0-1（0%-100%），V取值范围...
createImageBitmap
游戏人生
01-08 3020
转自http://www.jiazhengblog.com/blog/2019/03/24/3407/ 什么是ImageBitmap？ 我们先来看规范上是怎么说的： AnImageBitmapobject represents a bitmap image that can be painted to a canvas without undue latency. 直接翻译过来就是：ImageBitmap表示一个位图图像，可以绘制到 canvas 上，同时不会有较大的延迟。通过描述可以...
js小球与边框碰撞反弹_p5.js实现一个简单的网球小游戏
weixin_33350741的博客
12-25 1095
前言越来越觉得p5.js挺有意思的，虽然这个项目是由国外几个博士生还是硕士生在维护，但是做的很棒。p5.js可以说是我接触过的最容易入手的编程语言了。我主要是学习p5.js的同时，顺手练一下老早之前摸过的JavaScript。线条这个是之前尝试p5.js的几个线条，拿了两条塞在了游戏里。function setup() { // put setup code here createCa...
Unity 颜色空间（Color Space）转换
HelloCSDN666的博客
04-26 5729
很多小伙伴会遇到下面的问题，就是把UI切好的图片放到Unity中，会发现有些颜色的差异，尤其是透明度混合方面会有很大的变化，这些都是由于Unity中颜色空间的设置问题，先给大家看一下Unity中的效果。 可以看到，在Gamma空间下，我是用PS输出的70%透明度的纯黑色的图片，和使用windows自带应用打开的图片没有任何区别，我们打开图片的设置，有一个sRGB选项（下文会详解sRGB选项），不管开启还是关闭这个选项，图片都不会有变。由于PS是使用Gamma空间进行图片制作和输出的，所...
canvas 像素操作
wydsnza的博客
08-04 994
用 canvas 操作图片像素 canvas 像素操作 在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上。将图片绘制上去后，还可以使用 context.getImageData(sx, sy, sw, sh) 方法获取 canvas 区域隐含的像素数据，该方法返回一个 ImageData 对象，里面包含的是 canvas 像素信息。 getImageData 函数 这个函数有四个参数，都是必选的。context.getImageD
cavans模仿写出大海波浪的代码
06-01
好的，以下是一个简单的HTML文件，它使用Canvas模拟绘制大海和波浪的效果。 ...<!... <title>Canvas Wave Simulation canvas { border: 1px solid black;... const canvas = document.getElementById('canvas');...
cavans 星空
02-27
1. **Canvas API**：Canvas API提供了多种方法用于在画布上绘制图形，包括线条、圆形、矩形、文本以及图像等。在这个项目中，开发者可能使用`beginPath()`、`arc()`、`fill()`和`stroke()`等函数来绘制星星，模拟...
javaFX canvas的使用 demo
01-02
这个"javaFX canvas的使用 demo"展示了如何利用Canvas API来实现模拟图层的切换效果，这对于创建复杂的图形界面或者游戏场景非常有用。在本文中，我们将深入探讨JavaFX Canvas的使用方法以及如何构建图层系统。 ...
js cavans截图，指定元素截图
09-06
在JavaScript的世界里，Canvas是一个非常强大的绘图...通过学习和理解这些代码，你可以更好地掌握JavaScript和Canvas在实现局部截图中的运用。请确保根据自己的业务需求进行适当的修改和扩展，以适应不同的应用场景。
Html5 cavans 交互
04-17
5. **图像处理**：Canvas可以加载和绘制图像，通过`drawImage()`方法可以将图片绘制到画布上，也可以进行图像裁剪、旋转、缩放等操作。 6. **动画**：通过不断重绘并更新图形的位置、大小、颜色等属性，可以创建...
HTML5中的canvas动画以及地理定位
有点打脑壳的博客
12-23 1095
HTML5中的canvas动画以及地理定位
Canvas跨域问题 ? 如何解决
weixin_72426732的博客
08-09 4209
这是由于canvas受限于CORS策略, 会存在跨域问题, 虽然可以使用图像, 但是绘制到画布上会污染画布, 一旦一个画布被污染, 就无法提取画布的数据. 比如无法使用画布toBlod() , toDataURL() 或者getImageData() 方法。img标签上新增了crossorgin属性, 这个属性决定了图片获取过程中是否开启CORS功能( 存在兼容性问题 ) image.setAttribute(‘crossorgin’,’anonymous’)...
html 重置画布坐标系,H5中canvas的坐标系（画布初始）
weixin_39611666的博客
05-30 949
canvas画布的坐标系canvas画布是通过HTML的标签嵌入到web页面中的，它支持通过CSS结构来设置canvas的一些样式。比如通过style来设置canvas的width，height。这个设置的画布的表象，同时canvas标签还有两个属性width,height，这个用来设置canvas的坐标系的大小。看了这个不明白？好吧，我觉得用语言说也说不太明白，还得配合代码例子才能讲明白。htm...
Bitmap.creatBirmap()的简单使用
八步赶蝉
04-20 471
1.代码 Bitmap b = BitmapFactory.decodeResource(getResources() , R.drawable.a); ImageView cbt = (ImageView) findViewById(R.id.btmp1); cbt.setImageBitmap(b); Log.i("mydate" , b.ge
BitmapImage.CreateOptions属性
Xiangkr的专栏
04-27 1035
成员 成员名称说明 None未指定任何选项。这是 默认值。 DelayCreation使 BitmapSource 对象的初始化延迟到必要时才执行。在处理图像集合时，这十分有用。 IgnoreImageCache在不使用现有图像缓存的情况下加载图像。仅在需要刷新缓存中的图像时才可选择此选项。这个
Bitmap.createBitmap创建的新bitmap可能与原始bitmap是一个对象
Kido is a boy...
03-23 4048
无意间看到Bitmap.createBitmap的源码，发现其中有一句很有趣的话 “The new bitmap may be the same object as source, or a copy may have been made”。如下图： 于是乎，搜索了相关内容，看到有一篇文章遇到一种情况，大概是这样的：   当图像的旋转角度小余两个像素点之间的夹角时，图像即使选择也无法
2022年Web平台的新动态
u012384510的博客
05-22 504
大家好，我是若川。持续组织了8个月源码共读活动，感兴趣的可以点此加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。5月11-12日，谷歌举办了 2022 Google I/O 全球开发者大会。在大会...
canvas
最新发布
s8806479的博客
11-08 143
之前的擦掉，重新画一个点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值