Question

我认为这是一个常见的问题，但我似乎无法找到一个简单的解决方案。我有一个画布（我实际上是使用sketch.js但我认为不重要）带有背景图像，例如Storm Trooper：

然后我通过Sketch.js允许用户在上面写涂鸦：

从画布中获取图像时，我只得到画布图像：

我真正想要它们（就像它在屏幕上看到的那样，上面的第二次捕获）。

我尝试合并背景图片但没有成功。最终这个结果被推送到S3 - 所以我不想找到一种方法将它推入另一个HTML元素，我宁愿一起抓住画布和背景。但如果不可能，我会想象必须进行某种合并。

HTML：

        <div id="annotationmodal" class="modal">
        <div class="annotation-container" id="annotation_{{id}}">
            <div class="tools" style="margin-bottom:10px;">
            </div>
            <div class="center">
                <canvas id="tools_sketch_inlinephoto" width="{{width}}" height="{{height}}" style="background: url(@Url.Content("~")my/stuff/amazon/{{value}}/redirect) no-repeat center center;"></canvas>
            </div>
            <div class="center">
                <input type="button" class="btn btn-solid-grey btn-sm" onclick="device.annotationCancel();" value="Cancel" style="margin-right: 15px;" />
                <input type="button" class="btn btn-solid-green btn-sm" onclick="device.annotationSave(this, '{{id}}');" value="Save" />
            </div>
        </div>

使用Javascript：

   annotationSave: function (element, id) {
        var fileExtension = "jpg";
        var canvas = document.getElementById("tools_sketch_inlinephoto");
        var data = canvas.toDataURL();
        var key = device.uploadDataUri(fileExtension, "image/" + fileExtension, data);
        $("#annotationmodal").detach();
        if (settings.focusedField) {
            settings.focusedField.focus();
        }
    }

有一种简单的方法吗？请注意，背景图像也是从S3中拉出来的......

Answer 1

在使用Literally Canvas之前，我做过类似的事情。您可能遇到了我遇到的同样问题。可能有两幅画布。一个有图像，一个有你的绘图。我不确定Literally Canvas用于他们的画布名称所以我使用Javascript使用document.getElementsByTagName('canvas')[0]‌选择了第一个和第二个canvas元素

如果你使用drawImage，你可以将它们叠加在一起，它将合并它们。 640x480是我拥有的图像的尺寸。您应该更改该部分以匹配您的部分。

var canvas = document.getElementById("tools_sketch_inlinephoto");
var context = canvas.getContext('2d'); 

// Flatten the canvas background and effects 
context.drawImage(document.getElementsByTagName('canvas')[0]‌, 0, 0, 640, 480); 
context.drawImage(document.getElementsByTagName('canvas')[1]‌, 0, 0, 640, 480);

var savedImage = new Image();
savedImage.src = canvas.toDataURL("image/png");

Answer 2

使用html2canvas库保存画布背景带有画布内容

var c = document.getElementById("canvas");
html2canvas (c, {
    onrendered: function (canvas) {
        var blob = canvas.toDataURL();
        var pika = document.createElement("a");
        pika.href = blob;
        var d = new Date();
        pika.download = d+".png";
        pika.click();
    }
})

上面的代码下载您的画布背景，其中画布内容为png图像。别忘了包含库<script src="html2canvas.js"> </script>

保存画布背景以及画布内容

2 个答案: