Question

我有问题..我想从画布加载图像。它工作正常。问题是当我尝试为最终图像定义百分比宽度时。图像不尊重定义的百分比。

这是代码：

1）画布定义

<div style="display:block;">
    <canvas id="id_canvas_nz" width="1196px" height="808px"></canvas>
</div>

2）我想在画布中生成最终图像的图像

<div style="width:75%">
    <img id="id_image_def_nz" width="100%" src="" style="float:left" />
</div>

3）在画布中加载一个图像+一些转换+将画布结果放入id为“id_image_def_nz”的图像中

<script>

    var canvas_nz = document.getElementById("id_canvas_nz");
    var ctx_nz = canvas_nz.getContext("2d");

    // Define image

    var img_nz = new Image();

    img_nz.src = "./image.png";


    // When image is load:

    img_nz.onload = function()
    {

        // Draw the image in the canvas

        ctx_nz.drawImage(img_nz, 0, 0);


        // Transformations in the image:

        ...
        ...

        // Put the canvas into the redimensionated image

        var img2_nz = document.getElementById("id_image_def_nz");
        img2_nz.src = canvas_nz.toDataURL("image/png");

    }

</script>

好的，它将画布的内容放在我的图像中。但不是100％DIV的重新定位。将其放在正常尺寸，而不调整图像大小。

我该怎么做？

非常感谢!!!

Answer 1

哦！对不起..答案很简单..问题是画布区域。仅仅容纳图像是不够的。因此，在画布中，图像被部分加载。因此，在最终结果中，我认为图像没有调整大小。当真的，问题是在画布上没有加载所有图像..

抱歉，谢谢！：）

从canvas.toDataURL调整imagen的大小

1 个答案: