Javascript HTML Canvas 从背景中删除方块

发布于03月10日

我试着用下面的方法在画布上画一些东西

function drawOnCanvas(hex){
    const ctx = canvas.getContext("2d");

    canvas.height = (30/256) * canvas.width;
    ctx.fillStyle = 'black';

    const portion_width = canvas.width / 256;
    const portion_height = canvas.height / 30;


    const bytes = hexToBytes(hex);
    let x = 0, y = 0;
    for(let byte of bytes) {
        for(let i = 0 ; i < 8 ; i++) {
             if(byte & (1 << i)) {
                 ctx.fillRect(x, y, portion_width, portion_height);
             }
             x += portion_width;
             if(x >= canvas.width) {
                 x = 0;
                 y += portion_height;
             }
         }   
     }
}

下面是html片段

<canvas bind:this={canvas}></canvas>
<style>
    canvas {
        border: 2px solid red;
        width:100%;
    }
</style>

结果如下

这与python中解码为图像的字节相同.

我正试图移除背景中的方块，但没有成功，任何帮助都会被拒绝.

推荐答案

与每像素绘制单个矩形相比，使用Canvas get/putImageData调用构建新图像要高效得多，然后只需一个blit即可绘制.

这些方块可能是由于对大得多的图像进行下采样而形成的莫尔条纹，但如果没有关于源图像数据的更多信息，就很难说出这些人工制品来自何处.

下面是一个使用get/put image data调用的示例:

const hex =
    "ffffffffffffffffffffffffffffffffffffffffff0700f0000000fc7fffffffffffffffffffffffffff3ff8ff7f00fc1f0100fe3f00002000000000000080dd" +
    "ffffffffff003e80f8ff1fc0ff7f00fc070000fc7f0000f00000000000000000ffffffffff003e00e0ff1ff0ff3f00fc070000fcff0100f80100000000000000" +
    "ffffffffff007e00f8ff1ff0ff3f80ff4f0000feff0300f8010000800000001cffffffffff007f00f8ff1ff0ff3ff0ffef0000feff0700f8010000f81f0080ff" +
    "ffffffffff007e00f8ff1ff0ff3f00ffef0100ffff0f00f8010000fe7f00c0ffffffffffff007e00e0ff3fc0ff7f00fcff3700feff0f00f8010000ff7f00e0ff" +
    "ffffffffff011e04c0ff3f80ff7f00fc7f7700feff0f00f8010000ffff00e0ffffffffffff010c0280ff3f80ff7f00fc1f0000feff0f00fc010080ffff00f081" +
    "ffffffffff01800380ff3fc0ff7f00fc0f0000feff0f00fc0100801ff800f081ffffffffff01e01fc0ff3fc0ff7f00fc0f0000fee50f00fc0000800ff800f080" +
    "ffffffffff03801fc0ff3ff0ffff00fe070000fee30f00fc0000800ff800f080ffffffffff03c03fc0ff3ff0ff7f00ff070000ffe30f00fc0000800ffc00f8c0" +
    "ffffffffff01f83fc0ff7fe0ffff00ffff0100ffe30f00fc0000c00ffc00f8c0ffffffffff01f83fc0ff7fe0ffff01fcff0300fff70f00fc0000c00ffc0078c0" +
    "ffff1f1f3e00f87fe0ff7ff0ffffc1ffff0700ffff0f00fc3800c0077e007cc0ffff0f1e3c00fc7fe0ff7ff0ffffe0ffff0fe0ffff0f00fc7f00c0077e007cc0" +
    "ffff0f1e3c00fc3fe0ff7ff0fffff0ffff0ff0ffff0f00fe7f00e0077e007ce0ffff0f1c3c00fe7fe0ffffe0fffff8ffff7ff0ffff0f00fe7f00e0077e003ce0" +
    "ffff0f1c7800fe1d80ffffe0fffff1ffff7ff8ffff0f00fe3f00e00f3f007ee0ffff1f3c7800fc1700ffffc0fffff1ffff7ff8ffff0f00fe1f00e0ff3f00feff" +
    "ffff1f3c7800f81f00feffc1fffffbffffffffffff073efe0700e0ff1f00fc7fffff1f387000f80f00ffffe3fffffffffffffeffff177efc0100c6ff0f00f83f" +
    "ffff3f307000e01f00ffffe1ffffffff7fffffffff017f00000086ff0760c003ffff3f306000c00f80ffffebfffffffffffffdff7f00ff00000002fc00000000" +
    "ffff7f000000c00f00ffffffffffffffffffffffff20fe000000000000000000ffff7f000000c00380fffffffffffffffffffffffffffeff1f00000000000000" +
    "ffffff000000803fe0ffffffffffffffffffffffffffffffff07feff00001d00ffffff01831f00fffcffffffffffffffffffffffffffffffffffffffffffff07" ;

/** @type {HTMLCanvasElement} */
let cvs = document.getElementById("cvs");
let ctx = cvs.getContext("2d");

/** Pixel bit mask LUT */
const masks = [ 0x1, 0x2, 0x4, 0x8, 0x10, 0x20, 0x40, 0x80 ];

/** Image data buffer */
let imgData = ctx.getImageData(0, 0, 256, 30);
let pos = 0;

/** Decode bitmap to RGBA */
for (let i = 0; i < hex.length; i += 2) {
    let byte = parseInt(hex.substring(i, i + 2), 16);
    
    for (let b = 0; b < masks.length; ++b) {
        let pix = ((byte & masks[b]) >> b) * 0xFF;
        imgData.data[pos++] = pix; // R
        imgData.data[pos++] = pix; // G
        imgData.data[pos++] = pix; // B
        imgData.data[pos++] = 255; // A
    }
}

/** Push image data back into canvas */
ctx.putImageData(imgData, 0, 0);

<canvas id="cvs" width="256" height="30"></canvas>

Javascript相关问答推荐

Javascript HTML Canvas 从背景中删除方块

推荐答案

Javascript相关问答推荐

jsfat的黑色画布输出

如何计算数组子级的深度- Vue.js

使用NgDeliverentOutlet和动态内容投影的Angular 渲染组件

Express.js：使用Passport.js实现基于角色的身份验证时出现太多重定向问题

使用print This时， map 容器已在LeafletJS中初始化

没有输出到带有chrome.Devtools扩展的控制台

在Angular中将样式应用于innerHTML

Exceljs：我们在file.xlsx(...)&#中发现了一个问题'"" 39人；

在这种情况下，如何 for each 元素添加id？

屏幕右侧屏障上的产卵点""

html + java script！需要帮助来了解为什么我得到(无效的用户名或密码)

在react JS中映射数组对象的嵌套数据

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

单个HTML中的多个HTML文件

WhatsApp Cloud API上载问题：由于MIME类型不正确而导致接收&Quot；INVALID_REQUEST"；错误

如何在箭头函数中引入or子句？

元素字符串长度html

我想将Sitecore搜索面过滤器从多个转换为单个

Phaserjs-创建带有层纹理的精灵层以自定义外观

Jexl to LowerCase()和Replace()