Question

我正在使用fabric.js并创建一个自定义产品，但我无法保存图像和div以及画布上存在的内容...... 我的问题是如何将画布中存在的图像保持为图像。？

<!--  EDITOR      -->
<!--manipular div tranasparente-->
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
    <!---->
    <img id="tshirtFacing" src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"></img>
    <!--**********************************************************-->
    <div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
        <!--area de canvas-->
        <canvas id="lienzo" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    </div>

</div>

Image

Answer 1

HTMLCanvasElement.toDataURL()方法返回一个数据URI，其中包含由type参数指定的格式的图像表示（默认为PNG）。返回的图像分辨率为96 dpi。

var canvas = document.getElementById("lienzo");
var data = canvas.toDataURL("image/jpeg");

希望这会对你有所帮助。

如何保存画布图像

1 个答案: