个人中心
gpt4 book ai didi

javascript - 缩小 Canvas 正在被切断

转载 作者：太空宇宙 更新时间：2023-11-04 01:24:09 25 4
gpt4 key购买 nike

放大 Canvas 似乎工作正常，但缩小 Canvas 似乎会切断像素。我尝试过移动事物的顺序并在没有仅内存 Canvas 的情况下进行操作，但没有任何效果。我最好的猜测是 Canvas 正在缩小然后进一步缩小，因此 Canvas 数据没有覆盖整个 Canvas 大小。

// Create a newly scaled canvas from the original and then delete the original.
function ScaleCanvas(width, height, xScale, yScale) {

// Get the true overlay's current image data.
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// Create an in-memory canvas at the new resolution.
const newCanvas = $("<canvas>")
    .attr("width", width)
    .attr("height", height)[0];

// Draw the true overlay's image data into the in-memory canvas.
newCanvas.getContext("2d").putImageData(imageData, 0, 0);

// Update the size/resolution of the true overlay.
ctx.canvas.width = width;
ctx.canvas.height = height;

// Scale the true overlay's context.
ctx.scale(xScale, yScale);

// Draw the in-memory canvas onto the true overlay.
ctx.drawImage(newCanvas, 0, 0);
}

这里有一个相关的问题，我从中得到了大部分逻辑:How to scale an imageData in HTML canvas?

Canvas 在函数末尾是合适的分辨率/大小，但考虑到我有一些像素透明而其他像素不透明的黑色，很明显缩小 Canvas 右侧和底部的像素没有产生想要的效果。

更新这是一个jsfiddle以更好地说明问题。请注意，在 Canvas 缩小后，一个透明像素不会留在 Canvas 中间。

最佳答案

我没有设法重现，所以我也尝试放大和缩小 Canvas ，使用以下代码一切看起来都很好:

HTML:

<!doctype html>
<html>
    <head>
        <style>
            canvas {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="src" width="100" height="100"></canvas>
        <canvas id="dest" width="100" height="100"></canvas>


        <canvas id="src2" width="100" height="100"></canvas>
        <canvas id="dest2" width="100" height="100"></canvas>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="./main.js"></script>
    </body>
</html>

JavaScript:

function scaleCanvas(srcCanvas, destCanvas, xScale, yScale) {
    var destCtx = destCanvas.getContext("2d");

    destCtx.scale(xScale, yScale);
    destCtx.drawImage(srcCanvas, 0, 0);
}

window.onload = function() {
    // Drawing on the source canvas for testing purpose
    var srcCanvas = document.querySelector("#src");
    var srcCtx = srcCanvas.getContext("2d");
    var destCanvas = document.querySelector("#dest");

    var image = new Image();
    image.src = 'https://yt3.ggpht.com/-gAb9nWOBObg/AAAAAAAAAAI/AAAAAAAAAAA/CAZq5pc1dnY/s100-c-k-no-mo-rj-c0xffffff/photo.jpg';
    image.onload = function() {
        srcCtx.drawImage(image, 0, 0);
    }
    // ----

    setTimeout(function() {
        scaleCanvas(srcCanvas, destCanvas, 0.5, 0.5);
    }, 1000);
};

结果:

enter image description here

希望对您有所帮助。

编辑(06/02/2018):

我不确定是否完全理解您的问题。如果我是正确的，当您调整 Canvas 大小时，内容不会相应地调整大小。因此，中心的某些内容在调整大小后可能不会出现在应有的位置，而它必须位于调整后的内容的中心，以便保持原始比例。为了说明，我在中间添加了一个中等大小的红色方 block (比透明像素更明显):

调整大小之前:

enter image description here

调整大小后:

enter image description here

事实上，要实现缩小，您需要编辑您的 ScaleCanvas 调用:

来自这里:

ScaleCanvas(75, 75, .75, .75);

对此:

ScaleCanvas(100, 100, .75, .75);

只更新比例，不更新 Canvas 的大小。

这是你得到的:

调整大小之前:

enter image description here

调整大小后:

enter image description here

这是 fiddle : jsfiddle

希望我已经很好地理解您的问题，并且希望这可以解决问题。否则在下面评论:)

编辑(13/02/2018):

好的，如果您想同时调整 Canvas 及其内容的大小，ScaleCanvas 函数中新创建的 Canvas 必须与初始 Canvas 的大小相同。我更新了 fiddle ，以便您可以多次调整 Canvas 的大小，比例为 50%:updated jsfiddle .请注意 Canvas 的红色边框，这表明 Canvas 的尺寸也缩小了(不仅是视觉内容)。

关于javascript - 缩小 Canvas 正在被切断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48416977/

25 4 0
文章推荐： 嵌套取消引用的成本可以忽略不计吗？
文章推荐： node.js - 我想将 2 个图像数组从我的 Angular 前端传递到我的后端 Node js
文章推荐： c - 为什么在没有人阅读后继续写入命名管道？
文章推荐： arrays - 为什么我插入数组后仍然是空的？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com